@oneplatformdev/ui 0.1.99-beta.263 → 0.1.99-beta.266

package/Dropzone/Dropzone.stories.js

@@ -1,100 +1,294 @@
-import { jsx as a, jsxs as t } from "react/jsx-runtime";
-import { useState as r } from "react";
-import { Dropzone as o } from "./Dropzone.js";
-function l({ initialValue: e = [], ...i }) {
-  const [s, n] = r(e);
-  return /* @__PURE__ */ t("div", { className: "max-w-md space-y-3 h-58", children: [
-    /* @__PURE__ */ a(o, { ...i, value: s }),
-    /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground", children: [
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
+import { useState as s, useRef as S, useEffect as M } from "react";
+import { Dropzone as x } from "./Dropzone.js";
+import { DEFAULT_IMAGES_TYPES as c, DEFAULT_DOCUMENT_TYPES as y, DEFAULT_VIDEO_TYPES as u } from "./Dropzone.types.js";
+function a({ initialValue: e = [], ...g }) {
+  const [l, p] = s(e);
+  return /* @__PURE__ */ v("div", { className: "w-full space-y-3", children: [
+    /* @__PURE__ */ o(
+      x,
+      {
+        ...g,
+        value: l,
+        onChangeValue: (t) => p(t)
+      }
+    ),
+    /* @__PURE__ */ v("div", { className: "text-xs text-muted-foreground", children: [
       "value:",
-      /* @__PURE__ */ a("pre", { className: "mt-1 text-[11px] bg-muted p-2 rounded", children: JSON.stringify(s, null, 2) })
+      /* @__PURE__ */ o("pre", { className: "mt-1 text-[11px] bg-muted p-2 rounded", children: JSON.stringify(l, null, 2) })
     ] })
   ] });
 }
-const m = {
+const I = {
   title: "Dropzone",
-  component: o,
+  component: x,
   parameters: {
     layout: "centered"
   },
   args: {
-    labelDropzonePrompt: "Завантажте або перетягніть",
     labelSelectedFiles: "Selected files",
     labelFileTooLarge: "File is too large",
-    labelDropzoneSubPrompt: "Підтримуються файли до 5МБ у форматі .jpg .jpeg .png .webp .heic ",
     maxFiles: 1,
-    maxSizeMB: 10,
-    acceptTypes: ["image/jpeg", "image/png", "image/webp"],
+    maxSizeMB: 100,
     singlePick: !0,
-    className: "w-full p-0 rounded-[8px] bg-[#F5F5F5] h-[180px] max-h-[180px]"
+    className: "w-full"
   },
   argTypes: {
     onChangeValue: { control: !1 },
     value: { control: !1 }
   },
   decorators: [
-    (e) => /* @__PURE__ */ a("div", { className: "p-6 w-[420px]", children: /* @__PURE__ */ a(e, {}) })
+    (e) => /* @__PURE__ */ o("div", { className: "p-6 w-[680px]", children: /* @__PURE__ */ o(e, {}) })
   ]
-}, u = {
-  render: (e) => /* @__PURE__ */ a(l, { ...e })
-}, g = {
-  render: (e) => /* @__PURE__ */ a(
-    l,
-    {
-      ...e,
-      initialValue: [
-        "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=400"
-      ]
-    }
-  )
-}, h = {
+}, N = {
+  args: {
+    acceptTypes: c,
+    labelDropzonePrompt: "Upload image",
+    labelDropzoneSubPrompt: "Formats: .jpg .jpeg .png .webp",
+    maxSizeMB: 5
+  },
+  render: (e) => /* @__PURE__ */ o(a, { ...e })
+}, k = {
+  args: {
+    acceptTypes: y,
+    labelDropzonePrompt: "Upload file",
+    labelDropzoneSubPrompt: "Formats: pdf, doc/docx, xls/xlsx, ppt/pptx, txt, csv",
+    maxSizeMB: 100,
+    maxFiles: 1,
+    singlePick: !0
+  },
+  render: (e) => /* @__PURE__ */ o(a, { ...e })
+}, V = {
   args: {
-    maxFiles: 5,
-    singlePick: !1
+    acceptTypes: u,
+    labelDropzonePrompt: "Upload video",
+    labelDropzoneSubPrompt: "Formats: .mp4 .mov .avi .webm",
+    maxSizeMB: 100,
+    maxFiles: 1,
+    singlePick: !0
   },
-  render: (e) => /* @__PURE__ */ a(l, { ...e })
-}, x = {
+  render: (e) => /* @__PURE__ */ o(a, { ...e })
+}, L = {
   args: {
-    disabled: !0
+    acceptTypes: u,
+    labelDropzonePrompt: "Upload video",
+    labelDropzoneSubPrompt: "Formats: .mp4 .mov .avi .webm or YouTube URL as value",
+    maxSizeMB: 100,
+    maxFiles: 1,
+    singlePick: !0
   },
-  render: (e) => /* @__PURE__ */ a(
-    l,
+  render: (e) => /* @__PURE__ */ o(() => {
+    const [l, p] = s("https://www.youtube.com/watch?v=dQw4w9WgXcQ"), t = l.trim() ? [l.trim()] : [];
+    return /* @__PURE__ */ v("div", { className: "w-full space-y-3", children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          type: "text",
+          value: l,
+          onChange: (d) => p(d.target.value),
+          placeholder: "Paste YouTube URL",
+          className: "w-full h-10 rounded-md border border-[#E4E4E7] px-3 text-sm"
+        }
+      ),
+      /* @__PURE__ */ o(
+        x,
+        {
+          ...e,
+          value: t,
+          onChangeValue: (d) => {
+            const i = d[0];
+            typeof i == "string" && p(i);
+          }
+        }
+      )
+    ] });
+  }, {})
+};
+function w(e) {
+  const [g, l] = s([]), [p, t] = s(!1), [d, i] = s(0), [T, b] = s(0), [D, z] = s(0), r = S(null);
+  return M(() => () => {
+    r.current && clearInterval(r.current);
+  }, []), /* @__PURE__ */ o("div", { className: "w-full space-y-3", children: /* @__PURE__ */ o(
+    x,
     {
       ...e,
-      initialValue: [
-        "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=400"
-      ]
+      value: g,
+      isUploading: p,
+      uploadProgress: d,
+      uploadLoadedBytes: T,
+      uploadTotalBytes: D,
+      onCancelUpload: () => {
+        r.current && clearInterval(r.current), r.current = null, t(!1), i(0), b(0), z(0);
+      },
+      onChangeValue: (P) => {
+        if (l(P), !P.length) return;
+        r.current && clearInterval(r.current), r.current = null;
+        const f = P[0], n = f instanceof File ? f.size : 50 * 1024 * 1024;
+        let m = 0;
+        z(n), b(0), i(0), t(!0), r.current = setInterval(() => {
+          m = Math.min(n, m + n * 0.08);
+          const F = n ? Math.round(m / n * 100) : 0;
+          b(m), i(F), m >= n && (r.current && clearInterval(r.current), r.current = null, setTimeout(() => t(!1), 350));
+        }, 250);
+      }
+    }
+  ) });
+}
+const C = {
+  args: {
+    acceptTypes: u,
+    labelDropzonePrompt: "Upload video",
+    labelDropzoneSubPrompt: "Formats: .mp4 .mov .avi .webm",
+    labelUploadingTitle: "Завантаження відео...",
+    labelUploadingHint: "Будь ласка, не закривайте сторінку",
+    labelUploadingActionCancel: "Скасувати",
+    maxSizeMB: 100,
+    maxFiles: 1,
+    singlePick: !0
+  },
+  render: (e) => /* @__PURE__ */ o(w, { ...e })
+}, O = {
+  args: {
+    acceptTypes: c,
+    labelDropzonePrompt: "Перетягніть фото або оберіть файли",
+    labelDropzoneSubPrompt: "JPG, PNG, WEBP, HEIC · до 5 МБ кожне",
+    labelOrClickToSelect: "Завантажити файл",
+    maxSizeMB: 5,
+    maxFiles: 20,
+    singlePick: !1,
+    persistentDropzone: !0,
+    previewVariant: "image-grid",
+    className: "w-[598px]",
+    classNames: {
+      previewWraper: "w-[75px] h-[75px] rounded-[8px] border-0",
+      previewImage: "rounded-[8px] object-cover"
     }
-  )
-}, b = {
+  },
+  render: (e) => /* @__PURE__ */ o(a, { ...e })
+}, W = {
   args: {
+    acceptTypes: y,
+    labelDropzonePrompt: "Upload file...",
+    labelDropzoneSubPrompt: "PDF only, max 1 MB",
+    labelFileTooLarge: "File is too large. Max size is 1 MB.",
     maxSizeMB: 1,
-    labelFileTooLarge: "Max 1MB allowed"
+    maxFiles: 1,
+    singlePick: !0,
+    className: "w-[598px]"
   },
-  render: (e) => /* @__PURE__ */ a(l, { ...e })
-}, f = {
+  render: (e) => /* @__PURE__ */ o(a, { ...e })
+}, Y = {
   args: {
-    maxFiles: 10,
-    singlePick: !1
+    acceptTypes: ["application/pdf"],
+    labelDropzonePrompt: "Upload file...",
+    labelDropzoneSubPrompt: "Only PDF is supported",
+    labelInvalidFileType: "Invalid file type. Please upload a PDF file.",
+    maxSizeMB: 5,
+    maxFiles: 1,
+    singlePick: !0,
+    className: "w-[598px]"
   },
-  render: (e) => /* @__PURE__ */ a(
-    l,
-    {
-      ...e,
-      initialValue: [
-        "https://images.unsplash.com/photo-1492724441997-5dc865305da7?w=400",
-        "https://images.unsplash.com/photo-1495567720989-cebdbdd97913?w=400"
-      ]
+  render: (e) => /* @__PURE__ */ o(a, { ...e })
+}, j = {
+  args: {
+    acceptTypes: c,
+    labelDropzonePrompt: "Upload photo...",
+    labelDropzoneSubPrompt: "JPG/PNG/WEBP, max 1 MB",
+    labelFileTooLarge: "Photo is too large. Max size is 1 MB.",
+    maxSizeMB: 1,
+    maxFiles: 1,
+    singlePick: !0,
+    className: "w-[598px]"
+  },
+  render: (e) => /* @__PURE__ */ o(a, { ...e })
+}, G = {
+  args: {
+    acceptTypes: c,
+    labelDropzonePrompt: "Upload photo...",
+    labelDropzoneSubPrompt: "Only image files are supported",
+    labelInvalidFileType: "Invalid file type. Please upload an image file.",
+    maxSizeMB: 5,
+    maxFiles: 1,
+    singlePick: !0,
+    className: "w-[598px]"
+  },
+  render: (e) => /* @__PURE__ */ o(a, { ...e })
+}, A = {
+  args: {
+    acceptTypes: c,
+    labelDropzonePrompt: "Drag photos or choose files",
+    labelDropzoneSubPrompt: "JPG, PNG, WEBP · max 1 MB each",
+    labelFileTooLarge: "One or more photos are too large. Max size is 1 MB each.",
+    maxSizeMB: 1,
+    maxFiles: 20,
+    singlePick: !1,
+    persistentDropzone: !0,
+    previewVariant: "image-grid",
+    className: "w-[598px]",
+    classNames: {
+      previewWraper: "w-[75px] h-[75px] rounded-[8px] border-0",
+      previewImage: "rounded-[8px] object-cover"
+    }
+  },
+  render: (e) => /* @__PURE__ */ o(a, { ...e })
+}, _ = {
+  args: {
+    acceptTypes: c,
+    labelDropzonePrompt: "Drag photos or choose files",
+    labelDropzoneSubPrompt: "Only image files are supported",
+    labelInvalidFileType: "One or more files have invalid type.",
+    maxSizeMB: 5,
+    maxFiles: 20,
+    singlePick: !1,
+    persistentDropzone: !0,
+    previewVariant: "image-grid",
+    className: "w-[598px]",
+    classNames: {
+      previewWraper: "w-[75px] h-[75px] rounded-[8px] border-0",
+      previewImage: "rounded-[8px] object-cover"
     }
-  )
+  },
+  render: (e) => /* @__PURE__ */ o(a, { ...e })
+}, J = {
+  args: {
+    acceptTypes: u,
+    labelDropzonePrompt: "Upload video...",
+    labelDropzoneSubPrompt: "MP4/MOV/AVI/WEBM, max 1 MB",
+    labelFileTooLarge: "Video is too large. Max size is 1 MB.",
+    maxSizeMB: 1,
+    maxFiles: 1,
+    singlePick: !0,
+    className: "w-[598px]"
+  },
+  render: (e) => /* @__PURE__ */ o(a, { ...e })
+}, R = {
+  args: {
+    acceptTypes: u,
+    labelDropzonePrompt: "Upload video...",
+    labelDropzoneSubPrompt: "Only video files are supported",
+    labelInvalidFileType: "Invalid file type. Please upload a video file.",
+    maxSizeMB: 100,
+    maxFiles: 1,
+    singlePick: !0,
+    className: "w-[598px]"
+  },
+  render: (e) => /* @__PURE__ */ o(a, { ...e })
 };
 export {
-  u as Default,
-  x as Disabled,
-  f as GalleryMode,
-  h as MultipleFiles,
-  b as SmallFileLimit,
-  g as WithInitialValue,
-  m as default
+  Y as FileErrorInvalidType,
+  W as FileErrorTooLarge,
+  k as Files,
+  N as Images,
+  O as MultiImagesPersistent,
+  G as PhotoErrorInvalidType,
+  j as PhotoErrorTooLarge,
+  _ as PhotosMultiErrorInvalidType,
+  A as PhotosMultiErrorTooLarge,
+  R as VideoErrorInvalidType,
+  J as VideoErrorTooLarge,
+  C as VideoUploadingMock,
+  L as VideoYoutubeLink,
+  V as Videos,
+  I as default
 };
 //# sourceMappingURL=Dropzone.stories.js.map

package/Dropzone/Dropzone.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.stories.js","sources":["../../src/Dropzone/Dropzone.stories.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport { Dropzone } from './Dropzone';\n\ntype ControlledProps = React.ComponentProps<typeof Dropzone> & {\n  initialValue?: string[];\n};\n\nfunction ControlledDropzone({ initialValue = [], ...args }: ControlledProps) {\n  const [value, setValue] = useState<string[]>(initialValue);\n\n  return (\n    <div className=\"max-w-md space-y-3 h-58\">\n      <Dropzone {...args} value={value}  />\n\n      <div className=\"text-xs text-muted-foreground\">\n        value:\n        <pre className=\"mt-1 text-[11px] bg-muted p-2 rounded\">\n          {JSON.stringify(value, null, 2)}\n        </pre>\n      </div>\n    </div>\n  );\n}\n\nconst meta = {\n  title: 'Dropzone',\n  component: Dropzone,\n  parameters: {\n    layout: 'centered',\n  },\n  args: {\n    labelDropzonePrompt: 'Завантажте або перетягніть',\n    labelSelectedFiles: 'Selected files',\n    labelFileTooLarge: 'File is too large',\n    labelDropzoneSubPrompt:  \"Підтримуються файли до 5МБ у форматі .jpg .jpeg .png .webp .heic \",\n    maxFiles: 1,\n    maxSizeMB: 10,\n    acceptTypes: [\"image/jpeg\", \"image/png\", \"image/webp\"],\n    singlePick: true,\n    className: 'w-full p-0 rounded-[8px] bg-[#F5F5F5] h-[180px] max-h-[180px]'\n  },\n  argTypes: {\n    onChangeValue: { control: false },\n    value: { control: false },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"p-6 w-[420px]\">\n        <Story />\n      </div>\n    ),\n  ],\n} satisfies Meta<typeof Dropzone>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n//\n// 1️⃣ Default single image\n//\nexport const Default: Story = {\n  render: (args) => <ControlledDropzone {...args} />,\n};\n\n//\n// 2️⃣ With initial image\n//\nexport const WithInitialValue: Story = {\n  render: (args) => (\n    <ControlledDropzone\n      {...args}\n      initialValue={[\n        'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=400',\n      ]}\n    />\n  ),\n};\n\n//\n// 3️⃣ Multiple files\n//\nexport const MultipleFiles: Story = {\n  args: {\n    maxFiles: 5,\n    singlePick: false,\n  },\n  render: (args) => <ControlledDropzone {...args} />,\n};\n\n//\n// 4️⃣ Disabled\n//\nexport const Disabled: Story = {\n  args: {\n    disabled: true,\n  },\n  render: (args) => (\n    <ControlledDropzone\n      {...args}\n      initialValue={[\n        'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=400',\n      ]}\n    />\n  ),\n};\n\n//\n// 5️⃣ Big size limit example\n//\nexport const SmallFileLimit: Story = {\n  args: {\n    maxSizeMB: 1,\n    labelFileTooLarge: 'Max 1MB allowed',\n  },\n  render: (args) => <ControlledDropzone {...args} />,\n};\n\n//\n// 6️⃣ Without singlePick (gallery mode)\n//\n//\nexport const GalleryMode: Story = {\n  args: {\n    maxFiles: 10,\n    singlePick: false,\n  },\n  render: (args) => (\n    <ControlledDropzone\n      {...args}\n      initialValue={[\n        'https://images.unsplash.com/photo-1492724441997-5dc865305da7?w=400',\n        'https://images.unsplash.com/photo-1495567720989-cebdbdd97913?w=400',\n      ]}\n    />\n  ),\n};"],"names":["ControlledDropzone","initialValue","args","value","setValue","useState","jsxs","jsx","Dropzone","meta","Story","Default","WithInitialValue","MultipleFiles","Disabled","SmallFileLimit","GalleryMode"],"mappings":";;;AASA,SAASA,EAAmB,EAAE,cAAAC,IAAe,IAAI,GAAGC,KAAyB;AAC3E,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAmBJ,CAAY;AAEzD,SACE,gBAAAK,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAU,GAAGN,GAAM,OAAAC,EAAA,CAAe;AAAA,IAEnC,gBAAAG,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MAE7C,gBAAAC,EAAC,SAAI,WAAU,yCACZ,eAAK,UAAUJ,GAAO,MAAM,CAAC,EAAA,CAChC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAEA,MAAMM,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWD;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,IACnB,wBAAyB;AAAA,IACzB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa,CAAC,cAAc,aAAa,YAAY;AAAA,IACrD,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,eAAe,EAAE,SAAS,GAAA;AAAA,IAC1B,OAAO,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAE1B,YAAY;AAAA,IACV,CAACE,MACC,gBAAAH,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACG,KAAM,EAAA,CACT;AAAA,EAAA;AAGN,GASaC,IAAiB;AAAA,EAC5B,QAAQ,CAACT,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAKaU,IAA0B;AAAA,EACrC,QAAQ,CAACV,MACP,gBAAAK;AAAA,IAACP;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,cAAc;AAAA,QACZ;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,GAKaW,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ,CAACX,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAKaY,IAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAQ,CAACZ,MACP,gBAAAK;AAAA,IAACP;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,cAAc;AAAA,QACZ;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,GAKaa,IAAwB;AAAA,EACnC,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,mBAAmB;AAAA,EAAA;AAAA,EAErB,QAAQ,CAACb,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAMac,IAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ,CAACd,MACP,gBAAAK;AAAA,IAACP;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,cAAc;AAAA,QACZ;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Dropzone.stories.js","sources":["../../src/Dropzone/Dropzone.stories.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Dropzone } from './Dropzone';\r\nimport {\r\n  DEFAULT_DOCUMENT_TYPES,\r\n  DEFAULT_IMAGES_TYPES,\r\n  DropzoneValueItem,\r\n  DEFAULT_VIDEO_TYPES,\r\n} from './Dropzone.types';\r\n\r\ntype ControlledProps = React.ComponentProps<typeof Dropzone> & {\r\n  initialValue?: string[];\r\n};\r\n\r\nfunction ControlledDropzone({ initialValue = [], ...args }: ControlledProps) {\r\n  const [value, setValue] = useState<DropzoneValueItem[]>(initialValue);\r\n\r\n  return (\r\n    <div className=\"w-full space-y-3\">\r\n      <Dropzone\r\n        {...args}\r\n        value={value}\r\n        onChangeValue={(items) => setValue(items)}\r\n      />\r\n\r\n      <div className=\"text-xs text-muted-foreground\">\r\n        value:\r\n        <pre className=\"mt-1 text-[11px] bg-muted p-2 rounded\">\r\n          {JSON.stringify(value, null, 2)}\r\n        </pre>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst meta = {\r\n  title: 'Dropzone',\r\n  component: Dropzone,\r\n  parameters: {\r\n    layout: 'centered',\r\n  },\r\n  args: {\r\n    labelSelectedFiles: 'Selected files',\r\n    labelFileTooLarge: 'File is too large',\r\n    maxFiles: 1,\r\n    maxSizeMB: 100,\r\n    singlePick: true,\r\n    className: 'w-full',\r\n  },\r\n  argTypes: {\r\n    onChangeValue: { control: false },\r\n    value: { control: false },\r\n  },\r\n  decorators: [\r\n    (Story) => (\r\n      <div className=\"p-6 w-[680px]\">\r\n        <Story />\r\n      </div>\r\n    ),\r\n  ],\r\n} satisfies Meta<typeof Dropzone>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Images: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Upload image',\r\n    labelDropzoneSubPrompt: 'Formats: .jpg .jpeg .png .webp',\r\n    maxSizeMB: 5,\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const Files: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_DOCUMENT_TYPES,\r\n    labelDropzonePrompt: 'Upload file',\r\n    labelDropzoneSubPrompt: 'Formats: pdf, doc/docx, xls/xlsx, ppt/pptx, txt, csv',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const Videos: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video',\r\n    labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoYoutubeLink: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video',\r\n    labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm or YouTube URL as value',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => {\r\n    const YoutubeStory = () => {\r\n      const [url, setUrl] = useState('https://www.youtube.com/watch?v=dQw4w9WgXcQ');\r\n      const value = url.trim() ? [url.trim()] : [];\r\n\r\n      return (\r\n        <div className=\"w-full space-y-3\">\r\n          <input\r\n            type=\"text\"\r\n            value={url}\r\n            onChange={(event) => setUrl(event.target.value)}\r\n            placeholder=\"Paste YouTube URL\"\r\n            className=\"w-full h-10 rounded-md border border-[#E4E4E7] px-3 text-sm\"\r\n          />\r\n\r\n          <Dropzone\r\n            {...args}\r\n            value={value}\r\n            onChangeValue={(items) => {\r\n              const next = items[0];\r\n              if (typeof next === 'string') {\r\n                setUrl(next);\r\n              }\r\n            }}\r\n          />\r\n        </div>\r\n      );\r\n    };\r\n\r\n    return <YoutubeStory />;\r\n  },\r\n};\r\n\r\nfunction UploadingDropzoneMock(args: React.ComponentProps<typeof Dropzone>) {\r\n  const [value, setValue] = useState<DropzoneValueItem[]>([]);\r\n  const [isUploading, setIsUploading] = useState(false);\r\n  const [uploadProgress, setUploadProgress] = useState(0);\r\n  const [uploadLoadedBytes, setUploadLoadedBytes] = useState(0);\r\n  const [uploadTotalBytes, setUploadTotalBytes] = useState(0);\r\n  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timerRef.current) clearInterval(timerRef.current);\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <div className=\"w-full space-y-3\">\r\n      <Dropzone\r\n        {...args}\r\n        value={value}\r\n        isUploading={isUploading}\r\n        uploadProgress={uploadProgress}\r\n        uploadLoadedBytes={uploadLoadedBytes}\r\n        uploadTotalBytes={uploadTotalBytes}\r\n        onCancelUpload={() => {\r\n          if (timerRef.current) clearInterval(timerRef.current);\r\n          timerRef.current = null;\r\n          setIsUploading(false);\r\n          setUploadProgress(0);\r\n          setUploadLoadedBytes(0);\r\n          setUploadTotalBytes(0);\r\n        }}\r\n        onChangeValue={(items) => {\r\n          setValue(items);\r\n          if (!items.length) return;\r\n\r\n          if (timerRef.current) clearInterval(timerRef.current);\r\n          timerRef.current = null;\r\n\r\n          const selected = items[0];\r\n          const totalBytes =\r\n            selected instanceof File ? selected.size : 50 * 1024 * 1024;\r\n          let loadedBytes = 0;\r\n\r\n          setUploadTotalBytes(totalBytes);\r\n          setUploadLoadedBytes(0);\r\n          setUploadProgress(0);\r\n          setIsUploading(true);\r\n\r\n          timerRef.current = setInterval(() => {\r\n            loadedBytes = Math.min(totalBytes, loadedBytes + totalBytes * 0.08);\r\n            const progress = totalBytes ? Math.round((loadedBytes / totalBytes) * 100) : 0;\r\n\r\n            setUploadLoadedBytes(loadedBytes);\r\n            setUploadProgress(progress);\r\n\r\n            if (loadedBytes >= totalBytes) {\r\n              if (timerRef.current) clearInterval(timerRef.current);\r\n              timerRef.current = null;\r\n              setTimeout(() => setIsUploading(false), 350);\r\n            }\r\n          }, 250);\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport const VideoUploadingMock: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video',\r\n    labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n    labelUploadingTitle: 'Завантаження відео...',\r\n    labelUploadingHint: 'Будь ласка, не закривайте сторінку',\r\n    labelUploadingActionCancel: 'Скасувати',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => <UploadingDropzoneMock {...args} />,\r\n};\r\n\r\nexport const MultiImagesPersistent: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Перетягніть фото або оберіть файли',\r\n    labelDropzoneSubPrompt: 'JPG, PNG, WEBP, HEIC · до 5 МБ кожне',\r\n    labelOrClickToSelect: 'Завантажити файл',\r\n    maxSizeMB: 5,\r\n    maxFiles: 20,\r\n    singlePick: false,\r\n    persistentDropzone: true,\r\n    previewVariant: 'image-grid',\r\n    className: 'w-[598px]',\r\n    classNames: {\r\n      previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n      previewImage: 'rounded-[8px] object-cover',\r\n    },\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const FileErrorTooLarge: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_DOCUMENT_TYPES,\r\n    labelDropzonePrompt: 'Upload file...',\r\n    labelDropzoneSubPrompt: 'PDF only, max 1 MB',\r\n    labelFileTooLarge: 'File is too large. Max size is 1 MB.',\r\n    maxSizeMB: 1,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const FileErrorInvalidType: Story = {\r\n  args: {\r\n    acceptTypes: ['application/pdf'],\r\n    labelDropzonePrompt: 'Upload file...',\r\n    labelDropzoneSubPrompt: 'Only PDF is supported',\r\n    labelInvalidFileType: 'Invalid file type. Please upload a PDF file.',\r\n    maxSizeMB: 5,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotoErrorTooLarge: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Upload photo...',\r\n    labelDropzoneSubPrompt: 'JPG/PNG/WEBP, max 1 MB',\r\n    labelFileTooLarge: 'Photo is too large. Max size is 1 MB.',\r\n    maxSizeMB: 1,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotoErrorInvalidType: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Upload photo...',\r\n    labelDropzoneSubPrompt: 'Only image files are supported',\r\n    labelInvalidFileType: 'Invalid file type. Please upload an image file.',\r\n    maxSizeMB: 5,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotosMultiErrorTooLarge: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Drag photos or choose files',\r\n    labelDropzoneSubPrompt: 'JPG, PNG, WEBP · max 1 MB each',\r\n    labelFileTooLarge: 'One or more photos are too large. Max size is 1 MB each.',\r\n    maxSizeMB: 1,\r\n    maxFiles: 20,\r\n    singlePick: false,\r\n    persistentDropzone: true,\r\n    previewVariant: 'image-grid',\r\n    className: 'w-[598px]',\r\n    classNames: {\r\n      previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n      previewImage: 'rounded-[8px] object-cover',\r\n    },\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotosMultiErrorInvalidType: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Drag photos or choose files',\r\n    labelDropzoneSubPrompt: 'Only image files are supported',\r\n    labelInvalidFileType: 'One or more files have invalid type.',\r\n    maxSizeMB: 5,\r\n    maxFiles: 20,\r\n    singlePick: false,\r\n    persistentDropzone: true,\r\n    previewVariant: 'image-grid',\r\n    className: 'w-[598px]',\r\n    classNames: {\r\n      previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n      previewImage: 'rounded-[8px] object-cover',\r\n    },\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoErrorTooLarge: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video...',\r\n    labelDropzoneSubPrompt: 'MP4/MOV/AVI/WEBM, max 1 MB',\r\n    labelFileTooLarge: 'Video is too large. Max size is 1 MB.',\r\n    maxSizeMB: 1,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoErrorInvalidType: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video...',\r\n    labelDropzoneSubPrompt: 'Only video files are supported',\r\n    labelInvalidFileType: 'Invalid file type. Please upload a video file.',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n"],"names":["ControlledDropzone","initialValue","args","value","setValue","useState","jsxs","jsx","Dropzone","items","meta","Story","Images","DEFAULT_IMAGES_TYPES","Files","DEFAULT_DOCUMENT_TYPES","Videos","DEFAULT_VIDEO_TYPES","VideoYoutubeLink","url","setUrl","event","next","UploadingDropzoneMock","isUploading","setIsUploading","uploadProgress","setUploadProgress","uploadLoadedBytes","setUploadLoadedBytes","uploadTotalBytes","setUploadTotalBytes","timerRef","useRef","useEffect","selected","totalBytes","loadedBytes","progress","VideoUploadingMock","MultiImagesPersistent","FileErrorTooLarge","FileErrorInvalidType","PhotoErrorTooLarge","PhotoErrorInvalidType","PhotosMultiErrorTooLarge","PhotosMultiErrorInvalidType","VideoErrorTooLarge","VideoErrorInvalidType"],"mappings":";;;;AAeA,SAASA,EAAmB,EAAE,cAAAC,IAAe,IAAI,GAAGC,KAAyB;AAC3E,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAA8BJ,CAAY;AAEpE,SACE,gBAAAK,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACE,GAAGN;AAAA,QACJ,OAAAC;AAAA,QACA,eAAe,CAACM,MAAUL,EAASK,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAG1C,gBAAAH,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MAE7C,gBAAAC,EAAC,SAAI,WAAU,yCACZ,eAAK,UAAUJ,GAAO,MAAM,CAAC,EAAA,CAChC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAEA,MAAMO,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWF;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,IACnB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,eAAe,EAAE,SAAS,GAAA;AAAA,IAC1B,OAAO,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAE1B,YAAY;AAAA,IACV,CAACG,MACC,gBAAAJ,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACI,KAAM,EAAA,CACT;AAAA,EAAA;AAGN,GAMaC,IAAgB;AAAA,EAC3B,MAAM;AAAA,IACJ,aAAaC;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ,CAACX,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAEaY,IAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,aAAaC;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ,CAACb,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAEac,IAAgB;AAAA,EAC3B,MAAM;AAAA,IACJ,aAAaC;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ,CAACf,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAEagB,IAA0B;AAAA,EACrC,MAAM;AAAA,IACJ,aAAaD;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ,CAACf,wBACc,MAAM;AACzB,UAAM,CAACiB,GAAKC,CAAM,IAAIf,EAAS,6CAA6C,GACtEF,IAAQgB,EAAI,KAAA,IAAS,CAACA,EAAI,KAAA,CAAM,IAAI,CAAA;AAE1C,WACE,gBAAAb,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOY;AAAA,UACP,UAAU,CAACE,MAAUD,EAAOC,EAAM,OAAO,KAAK;AAAA,UAC9C,aAAY;AAAA,UACZ,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGZ,gBAAAd;AAAA,QAACC;AAAA,QAAA;AAAA,UACE,GAAGN;AAAA,UACJ,OAAAC;AAAA,UACA,eAAe,CAACM,MAAU;AACxB,kBAAMa,IAAOb,EAAM,CAAC;AACpB,YAAI,OAAOa,KAAS,YAClBF,EAAOE,CAAI;AAAA,UAEf;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GACF;AAAA,EAEJ,GAEQ,EAAa;AAEzB;AAEA,SAASC,EAAsBrB,GAA6C;AAC1E,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAA8B,CAAA,CAAE,GACpD,CAACmB,GAAaC,CAAc,IAAIpB,EAAS,EAAK,GAC9C,CAACqB,GAAgBC,CAAiB,IAAItB,EAAS,CAAC,GAChD,CAACuB,GAAmBC,CAAoB,IAAIxB,EAAS,CAAC,GACtD,CAACyB,GAAkBC,CAAmB,IAAI1B,EAAS,CAAC,GACpD2B,IAAWC,EAA8C,IAAI;AAEnE,SAAAC,EAAU,MACD,MAAM;AACX,IAAIF,EAAS,WAAS,cAAcA,EAAS,OAAO;AAAA,EACtD,GACC,CAAA,CAAE,GAGH,gBAAAzB,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA,gBAAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,OAAAC;AAAA,MACA,aAAAqB;AAAA,MACA,gBAAAE;AAAA,MACA,mBAAAE;AAAA,MACA,kBAAAE;AAAA,MACA,gBAAgB,MAAM;AACpB,QAAIE,EAAS,WAAS,cAAcA,EAAS,OAAO,GACpDA,EAAS,UAAU,MACnBP,EAAe,EAAK,GACpBE,EAAkB,CAAC,GACnBE,EAAqB,CAAC,GACtBE,EAAoB,CAAC;AAAA,MACvB;AAAA,MACA,eAAe,CAACtB,MAAU;AAExB,YADAL,EAASK,CAAK,GACV,CAACA,EAAM,OAAQ;AAEnB,QAAIuB,EAAS,WAAS,cAAcA,EAAS,OAAO,GACpDA,EAAS,UAAU;AAEnB,cAAMG,IAAW1B,EAAM,CAAC,GAClB2B,IACJD,aAAoB,OAAOA,EAAS,OAAO,KAAK,OAAO;AACzD,YAAIE,IAAc;AAElB,QAAAN,EAAoBK,CAAU,GAC9BP,EAAqB,CAAC,GACtBF,EAAkB,CAAC,GACnBF,EAAe,EAAI,GAEnBO,EAAS,UAAU,YAAY,MAAM;AACnC,UAAAK,IAAc,KAAK,IAAID,GAAYC,IAAcD,IAAa,IAAI;AAClE,gBAAME,IAAWF,IAAa,KAAK,MAAOC,IAAcD,IAAc,GAAG,IAAI;AAE7E,UAAAP,EAAqBQ,CAAW,GAChCV,EAAkBW,CAAQ,GAEtBD,KAAeD,MACbJ,EAAS,WAAS,cAAcA,EAAS,OAAO,GACpDA,EAAS,UAAU,MACnB,WAAW,MAAMP,EAAe,EAAK,GAAG,GAAG;AAAA,QAE/C,GAAG,GAAG;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEO,MAAMc,IAA4B;AAAA,EACvC,MAAM;AAAA,IACJ,aAAatB;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,qBAAqB;AAAA,IACrB,oBAAoB;AAAA,IACpB,4BAA4B;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,EAAA;AAAA,EAEd,QAAQ,CAACf,MAAS,gBAAAK,EAACgB,GAAA,EAAuB,GAAGrB,EAAA,CAAM;AACrD,GAEasC,IAA+B;AAAA,EAC1C,MAAM;AAAA,IACJ,aAAa3B;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,IACtB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,YAAY;AAAA,MACV,eAAe;AAAA,MACf,cAAc;AAAA,IAAA;AAAA,EAChB;AAAA,EAEF,QAAQ,CAACX,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAEauC,IAA2B;AAAA,EACtC,MAAM;AAAA,IACJ,aAAa1B;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ,CAACb,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAEawC,IAA8B;AAAA,EACzC,MAAM;AAAA,IACJ,aAAa,CAAC,iBAAiB;AAAA,IAC/B,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,IACtB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ,CAACxC,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAEayC,IAA4B;AAAA,EACvC,MAAM;AAAA,IACJ,aAAa9B;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ,CAACX,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAEa0C,IAA+B;AAAA,EAC1C,MAAM;AAAA,IACJ,aAAa/B;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,IACtB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ,CAACX,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAEa2C,IAAkC;AAAA,EAC7C,MAAM;AAAA,IACJ,aAAahC;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,YAAY;AAAA,MACV,eAAe;AAAA,MACf,cAAc;AAAA,IAAA;AAAA,EAChB;AAAA,EAEF,QAAQ,CAACX,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAEa4C,IAAqC;AAAA,EAChD,MAAM;AAAA,IACJ,aAAajC;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,IACtB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,YAAY;AAAA,MACV,eAAe;AAAA,MACf,cAAc;AAAA,IAAA;AAAA,EAChB;AAAA,EAEF,QAAQ,CAACX,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAEa6C,IAA4B;AAAA,EACvC,MAAM;AAAA,IACJ,aAAa9B;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ,CAACf,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAEa8C,IAA+B;AAAA,EAC1C,MAAM;AAAA,IACJ,aAAa/B;AAAA,IACb,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,IACtB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ,CAACf,MAAS,gBAAAK,EAACP,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD;"}

package/Dropzone/Dropzone.types.d.ts

@@ -13,6 +13,8 @@ export interface DropzoneTranslations {
     labelUploadErrors?: string;
     labelFileTooLarge?: string;
     labelInvalidFileType?: string;
+    labelVideoUploaded?: string;
+    labelVideoReplace?: string;
 }
 export interface DropzoneProps extends DropzoneTranslations, React.HTMLAttributes<HTMLDivElement> {
     acceptTypes?: string[];
@@ -27,6 +29,18 @@ export interface DropzoneProps extends DropzoneTranslations, React.HTMLAttribute
     singlePick?: boolean;
     labelDropzoneClassname?: string;
     labelDropzoneSubClassname?: string;
+    isUploading?: boolean;
+    uploadProgress?: number;
+    uploadLoadedBytes?: number;
+    uploadTotalBytes?: number;
+    onCancelUpload?: () => void;
+    labelUploadingTitle?: string;
+    labelUploadingHint?: string;
+    labelUploadingActionCancel?: string;
+    persistentDropzone?: boolean;
+    previewVariant?: 'default' | 'image-grid';
+    designVariant?: 'legacy' | 'modern';
+    documentUploadCard?: boolean;
 }
 export interface DropzoneStyles {
     idleWrapper?: string;
@@ -36,8 +50,10 @@ export interface DropzoneStyles {
     previewImage?: string;
     previewFile?: string;
 }
-export declare const DEFAULT_FILE_TYPES: string[];
+export declare const DEFAULT_DOCUMENT_TYPES: string[];
 export declare const DEFAULT_IMAGES_TYPES: string[];
+export declare const DEFAULT_VIDEO_TYPES: string[];
+export declare const DEFAULT_FILE_TYPES: string[];
 export interface DropzoneControl {
     setItems: Dispatch<SetStateAction<DropzoneValueItem[]>>;
 }

package/Dropzone/Dropzone.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.types.d.ts","sourceRoot":"","sources":["../../src/Dropzone/Dropzone.types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,CAAC,EAAE,IAAI,CACX,cAAc,EACd,eAAe,GAAG,cAAc,GAAG,aAAa,CACjD,CAAC;CACH;AAED,MAAM,WAAW,oBAAoB;IACnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,aACf,SAAQ,oBAAoB,EAC1B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,UAM9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAMhC,CAAC;AAGF,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;CACzD"}
+{"version":3,"file":"Dropzone.types.d.ts","sourceRoot":"","sources":["../../src/Dropzone/Dropzone.types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,CAAC,EAAE,IAAI,CACX,cAAc,EACd,eAAe,GAAG,cAAc,GAAG,aAAa,CACjD,CAAC;CACH;AAED,MAAM,WAAW,oBAAoB;IACnC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,aACf,SAAQ,oBAAoB,EAC1B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IAC1C,aAAa,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,sBAAsB,UAUlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAMhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAK/B,CAAC;AAGF,eAAO,MAAM,kBAAkB,UAAyB,CAAC;AAGzD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC;CACzD"}

package/Dropzone/Dropzone.types.js

@@ -1,18 +1,29 @@
-const p = [
+const e = [
+  "application/pdf",
   "application/msword",
   "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.ms-excel",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-powerpoint",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
   "text/csv",
-  "text/plain",
-  "application/pdf"
-], e = [
+  "text/plain"
+], o = [
   "image/png",
   "image/jpeg",
   "image/jpg",
   "image/webp"
   // 'image/gif', // TODO: normalize this type
-];
+], i = [
+  "video/mp4",
+  "video/quicktime",
+  "video/x-msvideo",
+  "video/webm"
+], n = e;
 export {
-  p as DEFAULT_FILE_TYPES,
-  e as DEFAULT_IMAGES_TYPES
+  e as DEFAULT_DOCUMENT_TYPES,
+  n as DEFAULT_FILE_TYPES,
+  o as DEFAULT_IMAGES_TYPES,
+  i as DEFAULT_VIDEO_TYPES
 };
 //# sourceMappingURL=Dropzone.types.js.map

package/Dropzone/Dropzone.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.types.js","sources":["../../src/Dropzone/Dropzone.types.tsx"],"sourcesContent":["import { FileRejection } from 'react-dropzone';\nimport { Dispatch, SetStateAction } from 'react';\n\nexport type DropzoneValueItem = File | string;\n\nexport interface FilePreviewProps {\n  item: DropzoneValueItem;\n  styles?: Pick<\n    DropzoneStyles,\n    'previewWraper' | 'previewImage' | 'previewFile'\n  >;\n}\n\nexport interface DropzoneTranslations {\n  labelDropzonePrompt?: string;\n  labelDropzoneSubPrompt?: string;\n  labelOrClickToSelect?: string;\n  labelSelectedFiles?: string;\n  labelUploadErrors?: string;\n  labelFileTooLarge?: string;\n  labelInvalidFileType?: string;\n}\n\nexport interface DropzoneProps\n  extends DropzoneTranslations,\n    React.HTMLAttributes<HTMLDivElement> {\n  acceptTypes?: string[];\n  maxSizeMB: number;\n  maxFiles?: number;\n  onErrors?: (errors: FileRejection[]) => void;\n  hideErrors?: boolean;\n  disabled?: boolean;\n  classNames?: DropzoneStyles;\n  value?: DropzoneValueItem[];\n  onChangeValue?: (items: DropzoneValueItem[]) => void;\n  singlePick?: boolean;\n  labelDropzoneClassname?: string;\n  labelDropzoneSubClassname?: string;\n}\n\nexport interface DropzoneStyles {\n  idleWrapper?: string;\n  previewWrapper?: string;\n  errorWrapper?: string;\n  previewWraper?: string;\n  previewImage?: string;\n  previewFile?: string;\n}\n\nexport const DEFAULT_FILE_TYPES = [\n  'application/msword',\n  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n  'text/csv',\n  'text/plain',\n  'application/pdf',\n];\n\nexport const DEFAULT_IMAGES_TYPES = [\n  'image/png',\n  'image/jpeg',\n  'image/jpg',\n  'image/webp',\n  // 'image/gif', // TODO: normalize this type\n];\n\n\nexport interface DropzoneControl {\n  setItems: Dispatch<SetStateAction<DropzoneValueItem[]>>;\n}\n"],"names":["DEFAULT_FILE_TYPES","DEFAULT_IMAGES_TYPES"],"mappings":"AAiDO,MAAMA,IAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAEF;"}
+{"version":3,"file":"Dropzone.types.js","sources":["../../src/Dropzone/Dropzone.types.tsx"],"sourcesContent":["import { FileRejection } from 'react-dropzone';\r\nimport { Dispatch, SetStateAction } from 'react';\r\n\r\nexport type DropzoneValueItem = File | string;\r\n\r\nexport interface FilePreviewProps {\r\n  item: DropzoneValueItem;\r\n  styles?: Pick<\r\n    DropzoneStyles,\r\n    'previewWraper' | 'previewImage' | 'previewFile'\r\n  >;\r\n}\r\n\r\nexport interface DropzoneTranslations {\r\n  labelDropzonePrompt?: string;\r\n  labelDropzoneSubPrompt?: string;\r\n  labelOrClickToSelect?: string;\r\n  labelSelectedFiles?: string;\r\n  labelUploadErrors?: string;\r\n  labelFileTooLarge?: string;\r\n  labelInvalidFileType?: string;\r\n  labelVideoUploaded?: string;\r\n  labelVideoReplace?: string;\r\n}\r\n\r\nexport interface DropzoneProps\r\n  extends DropzoneTranslations,\r\n    React.HTMLAttributes<HTMLDivElement> {\r\n  acceptTypes?: string[];\r\n  maxSizeMB: number;\r\n  maxFiles?: number;\r\n  onErrors?: (errors: FileRejection[]) => void;\r\n  hideErrors?: boolean;\r\n  disabled?: boolean;\r\n  classNames?: DropzoneStyles;\r\n  value?: DropzoneValueItem[];\r\n  onChangeValue?: (items: DropzoneValueItem[]) => void;\r\n  singlePick?: boolean;\r\n  labelDropzoneClassname?: string;\r\n  labelDropzoneSubClassname?: string;\r\n  isUploading?: boolean;\r\n  uploadProgress?: number;\r\n  uploadLoadedBytes?: number;\r\n  uploadTotalBytes?: number;\r\n  onCancelUpload?: () => void;\r\n  labelUploadingTitle?: string;\r\n  labelUploadingHint?: string;\r\n  labelUploadingActionCancel?: string;\r\n  persistentDropzone?: boolean;\r\n  previewVariant?: 'default' | 'image-grid';\r\n  designVariant?: 'legacy' | 'modern';\r\n  documentUploadCard?: boolean;\r\n}\r\n\r\nexport interface DropzoneStyles {\r\n  idleWrapper?: string;\r\n  previewWrapper?: string;\r\n  errorWrapper?: string;\r\n  previewWraper?: string;\r\n  previewImage?: string;\r\n  previewFile?: string;\r\n}\r\n\r\nexport const DEFAULT_DOCUMENT_TYPES = [\r\n  'application/pdf',\r\n  'application/msword',\r\n  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\r\n  'application/vnd.ms-excel',\r\n  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\r\n  'application/vnd.ms-powerpoint',\r\n  'application/vnd.openxmlformats-officedocument.presentationml.presentation',\r\n  'text/csv',\r\n  'text/plain',\r\n];\r\n\r\nexport const DEFAULT_IMAGES_TYPES = [\r\n  'image/png',\r\n  'image/jpeg',\r\n  'image/jpg',\r\n  'image/webp',\r\n  // 'image/gif', // TODO: normalize this type\r\n];\r\n\r\nexport const DEFAULT_VIDEO_TYPES = [\r\n  'video/mp4',\r\n  'video/quicktime',\r\n  'video/x-msvideo',\r\n  'video/webm',\r\n];\r\n\r\n// Backward-compatible alias.\r\nexport const DEFAULT_FILE_TYPES = DEFAULT_DOCUMENT_TYPES;\r\n\r\n\r\nexport interface DropzoneControl {\r\n  setItems: Dispatch<SetStateAction<DropzoneValueItem[]>>;\r\n}\r\n"],"names":["DEFAULT_DOCUMENT_TYPES","DEFAULT_IMAGES_TYPES","DEFAULT_VIDEO_TYPES","DEFAULT_FILE_TYPES"],"mappings":"AA+DO,MAAMA,IAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAEF,GAEaC,IAAsB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGaC,IAAqBH;"}

package/Dropzone/DropzoneFilePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropzoneFilePreview.d.ts","sourceRoot":"","sources":["../../src/Dropzone/DropzoneFilePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAwB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAI1E,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA8D5C,CAAC"}
+{"version":3,"file":"DropzoneFilePreview.d.ts","sourceRoot":"","sources":["../../src/Dropzone/DropzoneFilePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAwB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAM1E,OAAO,wCAAwC,CAAC;AAChD,OAAO,iDAAiD,CAAC;AACzD,OAAO,yDAAyD,CAAC;AAEjE,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA8E5C,CAAC"}

package/Dropzone/DropzoneFilePreview.js

@@ -1,48 +1,68 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import { useState as u, useEffect as f } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useState as p, useEffect as f } from "react";
 import { File as m } from "lucide-react";
-import { DEFAULT_IMAGES_TYPES as p } from "./Dropzone.types.js";
+import { DEFAULT_IMAGES_TYPES as w } from "./Dropzone.types.js";
 import { isFile as a } from "./DropzoneUtils.js";
-import { cn as t } from "@oneplatformdev/utils";
-const N = ({ item: e, styles: s }) => {
-  const [c, r] = u(null), i = a(e) && p.includes(e.type);
+import { cn as i } from "@oneplatformdev/utils";
+import { MediaPlayer as x, MediaProvider as v } from "@vidstack/react";
+import { DefaultVideoLayout as h, defaultLayoutIcons as y } from "@vidstack/react/player/layouts/default";
+import "@vidstack/react/player/styles/base.css";
+import "@vidstack/react/player/styles/default/theme.css";
+import "@vidstack/react/player/styles/default/layouts/video.css";
+const E = ({ item: e, styles: t }) => {
+  const [s, o] = p(null), d = a(e) && w.includes(e.type), c = a(e) && e.type.includes("video");
   return f(() => {
-    let l = null;
-    if (a(e) && i) {
-      const o = new FileReader();
-      return o.onloadend = () => r(o.result), o.readAsDataURL(e), () => r(null);
+    let r = null;
+    if (a(e) && d) {
+      const n = new FileReader();
+      return n.onloadend = () => o(n.result), n.readAsDataURL(e), () => o(null);
     } else {
       if (typeof e == "string")
-        return l = new Image(), l.src = e, l.onload = () => r(e), l.onerror = () => r(null), () => {
-          l.onload = null, l.onerror = null;
+        return r = new Image(), r.src = e, r.onload = () => o(e), r.onerror = () => o(null), () => {
+          r.onload = null, r.onerror = null;
         };
-      r(null);
+      if (a(e) && c) {
+        const n = URL.createObjectURL(e);
+        return o(n), () => URL.revokeObjectURL(n);
+      } else
+        o(null);
     }
-    return () => r(null);
-  }, [e, i]), /* @__PURE__ */ n(
+    return () => o(null);
+  }, [e, d, c]), /* @__PURE__ */ l(
     "div",
     {
-      className: t(
+      className: i(
         "w-32 h-32 border border-gray-300 rounded-md overflow-hidden flex items-center justify-center",
-        s?.previewWraper
+        t?.previewWraper
       ),
-      children: c ? /* @__PURE__ */ n(
+      children: s && c ? /* @__PURE__ */ l("div", { className: "w-full h-full bg-black", onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ u(
+        x,
+        {
+          src: a(e) ? { src: s, type: e.type } : s,
+          className: "h-full w-full bg-black text-white",
+          playsInline: !0,
+          children: [
+            /* @__PURE__ */ l(v, {}),
+            /* @__PURE__ */ l(h, { icons: y })
+          ]
+        }
+      ) }) : s ? /* @__PURE__ */ l(
         "img",
         {
-          src: c,
+          src: s,
           alt: a(e) ? e.name : "external-image",
-          className: t("w-full h-full object-cover", s?.previewImage)
+          className: i("w-full h-full object-cover", t?.previewImage)
         }
-      ) : /* @__PURE__ */ d(
+      ) : /* @__PURE__ */ u(
         "div",
         {
-          className: t(
+          className: i(
             "flex flex-col items-center justify-center text-gray-500 text-sm p-2 text-center",
-            s?.previewFile
+            t?.previewFile
           ),
           children: [
-            /* @__PURE__ */ n(m, { className: "w-6 h-6" }),
-            a(e) ? /* @__PURE__ */ n("span", { className: "text-xs break-all", children: e.name }) : /* @__PURE__ */ n("span", { className: "text-xs break-all", children: e })
+            /* @__PURE__ */ l(m, { className: "w-6 h-6" }),
+            a(e) ? /* @__PURE__ */ l("span", { className: "text-xs break-all", children: e.name }) : /* @__PURE__ */ l("span", { className: "text-xs break-all", children: e })
           ]
         }
       )
@@ -50,6 +70,6 @@ const N = ({ item: e, styles: s }) => {
   );
 };
 export {
-  N as FilePreview
+  E as FilePreview
 };
 //# sourceMappingURL=DropzoneFilePreview.js.map