geoiq-frontend-ui-kit 2.0.2 → 2.0.4

package/dist/index.es180.js

@@ -1,29 +1,118 @@
-import e from "react";
-function t({ children: r }) {
-  return /* @__PURE__ */ e.createElement(
-    "svg",
+import { Typography as m } from "./index.es19.js";
+import { Spinner as v } from "./index.es64.js";
+import { Upload as A, X as $, Pen as x } from "lucide-react";
+import e, { useState as M, useRef as P } from "react";
+import { useFormValues as R } from "./index.es161.js";
+import { useToast as T } from "./index.es87.js";
+const L = ({
+  id: f,
+  onChange: o,
+  value: l = [],
+  accept: h = "image/*",
+  error: d,
+  maxImages: r = 20
+}) => {
+  const { onAssetUpload: g, onToggleImageEditor: p } = R(), { toast: s } = T(), [a, u] = M(!1), c = P(null), y = async (i) => {
+    const t = i.target.files;
+    if (!(!t?.length || a)) {
+      if (l.length + t.length > r) {
+        s({
+          title: "Alert!",
+          description: `Maximum ${r} images allowed.`,
+          icon: "warning"
+        });
+        return;
+      }
+      if (g) {
+        u(!0);
+        try {
+          const n = Array.from(t).map((k) => g(k)), w = await Promise.all(n);
+          o([...l, ...w]), s({
+            title: "Alert!",
+            description: `${t.length} ${t.length === 1 ? "image" : "images"} uploaded successfully.`,
+            icon: "success"
+          });
+        } catch {
+          s({
+            title: "Alert!",
+            description: "Error uploading images",
+            icon: "warning"
+          });
+        } finally {
+          u(!1), c.current && (c.current.value = "");
+        }
+      }
+    }
+  }, b = () => {
+    !a && l.length < r ? c.current?.click() : l.length >= r && s({
+      title: "Alert!",
+      description: `Maximum ${r} images allowed.`,
+      icon: "warning"
+    });
+  }, E = (i) => {
+    if (!a) {
+      const t = [...l];
+      t.splice(i, 1), o(t);
+    }
+  };
+  function N(i, t) {
+    const n = [...l];
+    n.splice(t, 1, i), o(n);
+  }
+  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, a && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement(v, { className: "w-8 h-8 text-primary-1" })), /* @__PURE__ */ e.createElement("div", { className: "relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1" }, /* @__PURE__ */ e.createElement(
+    "button",
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.6,
-      strokeLinecap: "round"
+      className: "w-full",
+      onClick: b,
+      type: "button",
+      disabled: a || l.length >= r
     },
-    r
-  );
-}
-const l = {
-  rect: /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement("rect", { x: "4", y: "5", width: "16", height: "14", rx: "1" })),
-  ellipse: /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement("ellipse", { cx: "12", cy: "12", rx: "9", ry: "6" })),
-  circle: /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement("circle", { cx: "12", cy: "12", r: "8" })),
-  line: /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement("path", { d: "M5 19L19 5" })),
-  dashedLine: /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement("path", { d: "M5 19L19 5", strokeDasharray: "4 3", strokeLinecap: "butt" })),
-  arrow: /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement("path", { d: "M5 19L19 5" }), /* @__PURE__ */ e.createElement("path", { d: "M19 5v7M19 5h-7" })),
-  dashedArrow: /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement("path", { d: "M5 19L19 5", strokeDasharray: "4 3", strokeLinecap: "butt" }), /* @__PURE__ */ e.createElement("path", { d: "M19 5v7M19 5h-7" })),
-  doubleArrow: /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement("path", { d: "M5 19L19 5" }), /* @__PURE__ */ e.createElement("path", { d: "M19 5v7M19 5h-7" }), /* @__PURE__ */ e.createElement("path", { d: "M5 19v-7M5 19h7" })),
-  dashedDoubleArrow: /* @__PURE__ */ e.createElement(t, null, /* @__PURE__ */ e.createElement("path", { d: "M5 19L19 5", strokeDasharray: "4 3", strokeLinecap: "butt" }), /* @__PURE__ */ e.createElement("path", { d: "M19 5v7M19 5h-7" }), /* @__PURE__ */ e.createElement("path", { d: "M5 19v-7M5 19h7" }))
+    /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ e.createElement("div", { className: "bg-gray-100 rounded-full" }, /* @__PURE__ */ e.createElement(A, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(m, { variant: "body1", className: "text-gray-600" }, a ? "Uploading..." : l.length >= r ? `Maximum ${r} images reached` : "Add Images"), l.length > 0 && /* @__PURE__ */ e.createElement(m, { variant: "body1", className: "text-gray-500" }, l.length, " of ", r, " images"))
+  ), /* @__PURE__ */ e.createElement(
+    "input",
+    {
+      ref: c,
+      id: `${f}-gallery`,
+      type: "file",
+      accept: h,
+      disabled: a || l.length >= r,
+      onChange: y,
+      className: "hidden",
+      multiple: !0
+    }
+  ), d && /* @__PURE__ */ e.createElement(m, { variant: "body1", className: "mt-1 text-danger-1" }, d)), l.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4" }, l.map((i, t) => /* @__PURE__ */ e.createElement("div", { key: t, className: "relative flex rounded" }, /* @__PURE__ */ e.createElement(
+    "img",
+    {
+      src: i.public_url,
+      alt: `Preview ${t + 1}`,
+      className: "object-cover w-full h-24 rounded"
+    }
+  ), /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      onClick: () => E(t),
+      className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100",
+      type: "button",
+      disabled: a
+    },
+    /* @__PURE__ */ e.createElement($, { size: 16, className: "stroke-danger" })
+  ), p && /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: (n) => {
+        n.currentTarget.blur(), p({
+          imageUrl: i.public_url,
+          index: t,
+          onReplaceImage: N
+        });
+      },
+      className: "absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100"
+    },
+    /* @__PURE__ */ e.createElement(x, { size: 16, className: "stroke-danger" })
+  )))));
 };
 export {
-  l as ShapeIcons
+  L as MultiImagePicker
 };
 //# sourceMappingURL=index.es180.js.map

package/dist/index.es180.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es180.js","sources":["../src/components/organisms/image-editor/components/shape-icons.tsx"],"sourcesContent":["import React from 'react'\n\nfunction Icon({ children }: { children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.6}\n      strokeLinecap=\"round\"\n    >\n      {children}\n    </svg>\n  )\n}\n\nexport const ShapeIcons: Record<string, React.ReactNode> = {\n  rect: (\n    <Icon>\n      <rect x=\"4\" y=\"5\" width=\"16\" height=\"14\" rx=\"1\" />\n    </Icon>\n  ),\n  ellipse: (\n    <Icon>\n      <ellipse cx=\"12\" cy=\"12\" rx=\"9\" ry=\"6\" />\n    </Icon>\n  ),\n  circle: (\n    <Icon>\n      <circle cx=\"12\" cy=\"12\" r=\"8\" />\n    </Icon>\n  ),\n  line: (\n    <Icon>\n      <path d=\"M5 19L19 5\" />\n    </Icon>\n  ),\n  dashedLine: (\n    <Icon>\n      <path d=\"M5 19L19 5\" strokeDasharray=\"4 3\" strokeLinecap=\"butt\" />\n    </Icon>\n  ),\n  arrow: (\n    <Icon>\n      <path d=\"M5 19L19 5\" />\n      <path d=\"M19 5v7M19 5h-7\" />\n    </Icon>\n  ),\n  dashedArrow: (\n    <Icon>\n      <path d=\"M5 19L19 5\" strokeDasharray=\"4 3\" strokeLinecap=\"butt\" />\n      <path d=\"M19 5v7M19 5h-7\" />\n    </Icon>\n  ),\n  doubleArrow: (\n    <Icon>\n      <path d=\"M5 19L19 5\" />\n      <path d=\"M19 5v7M19 5h-7\" />\n      <path d=\"M5 19v-7M5 19h7\" />\n    </Icon>\n  ),\n  dashedDoubleArrow: (\n    <Icon>\n      <path d=\"M5 19L19 5\" strokeDasharray=\"4 3\" strokeLinecap=\"butt\" />\n      <path d=\"M19 5v7M19 5h-7\" />\n      <path d=\"M5 19v-7M5 19h7\" />\n    </Icon>\n  ),\n}\n"],"names":["Icon","children","React","ShapeIcons"],"mappings":";AAEA,SAASA,EAAK,EAAE,UAAAC,KAA2C;AACzD,SACEC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,IAAA;AAAA,IAEbD;AAAA,EAAA;AAGP;AAEO,MAAME,IAA8C;AAAA,EACzD,MACED,gBAAAA,EAAA,cAACF,GAAA,MACCE,gBAAAA,EAAA,cAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,CAClD;AAAA,EAEF,SACEA,gBAAAA,EAAA,cAACF,GAAA,MACCE,gBAAAA,EAAA,cAAC,WAAA,EAAQ,IAAG,MAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI,CACzC;AAAA,EAEF,QACEA,gBAAAA,EAAA,cAACF,GAAA,MACCE,gBAAAA,EAAA,cAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,IAAA,CAAI,CAChC;AAAA,EAEF,MACEA,gBAAAA,EAAA,cAACF,GAAA,sCACE,QAAA,EAAK,GAAE,cAAa,CACvB;AAAA,EAEF,YACEE,gBAAAA,EAAA,cAACF,GAAA,MACCE,gBAAAA,EAAA,cAAC,QAAA,EAAK,GAAE,cAAa,iBAAgB,OAAM,eAAc,OAAA,CAAO,CAClE;AAAA,EAEF,OACEA,gBAAAA,EAAA,cAACF,GAAA,MACCE,gBAAAA,EAAA,cAAC,QAAA,EAAK,GAAE,aAAA,CAAa,GACrBA,gBAAAA,EAAA,cAAC,QAAA,EAAK,GAAE,kBAAA,CAAkB,CAC5B;AAAA,EAEF,aACEA,gBAAAA,EAAA,cAACF,GAAA,MACCE,gBAAAA,EAAA,cAAC,QAAA,EAAK,GAAE,cAAa,iBAAgB,OAAM,eAAc,QAAO,GAChEA,gBAAAA,EAAA,cAAC,QAAA,EAAK,GAAE,mBAAkB,CAC5B;AAAA,EAEF,aACEA,gBAAAA,EAAA,cAACF,GAAA,MACCE,gBAAAA,EAAA,cAAC,QAAA,EAAK,GAAE,aAAA,CAAa,GACrBA,gBAAAA,EAAA,cAAC,QAAA,EAAK,GAAE,kBAAA,CAAkB,mCACzB,QAAA,EAAK,GAAE,mBAAkB,CAC5B;AAAA,EAEF,mDACGF,GAAA,MACCE,gBAAAA,EAAA,cAAC,UAAK,GAAE,cAAa,iBAAgB,OAAM,eAAc,QAAO,GAChEA,gBAAAA,EAAA,cAAC,UAAK,GAAE,kBAAA,CAAkB,GAC1BA,gBAAAA,EAAA,cAAC,QAAA,EAAK,GAAE,kBAAA,CAAkB,CAC5B;AAEJ;"}
+{"version":3,"file":"index.es180.js","sources":["../src/components/ui/form-renderer/components/form-fields/components/multi-image-picker/index.tsx"],"sourcesContent":["import { Typography } from '@/components/atoms/typography'\nimport { useToast } from '@/components/molecules/toast'\nimport { Spinner } from '@/components/unstyled/spinner'\nimport { Upload, X, Pen } from 'lucide-react'\nimport React, { useRef, useState } from 'react'\nimport { useFormValues } from '../../../../context/form-values'\nimport { AssetValue } from '../../../../form.types'\n\ninterface MultiImagePickerProps {\n  id: string\n  onChange: (data: AssetValue[]) => void\n  value?: AssetValue[]\n  accept?: string\n  error?: string\n  maxImages?: number\n}\n\nconst MultiImagePicker: React.FC<MultiImagePickerProps> = ({\n  id,\n  onChange,\n  value = [],\n  accept = 'image/*',\n  error,\n  maxImages = 20,\n}) => {\n  const { onAssetUpload, onToggleImageEditor } = useFormValues()\n  const { toast } = useToast()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n\n  const handleImageSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files\n    if (!files?.length || isLoading) return\n\n    if (value.length + files.length > maxImages) {\n      toast({\n        title: 'Alert!',\n        description: `Maximum ${maxImages} images allowed.`,\n        icon: 'warning',\n      })\n      return\n    }\n\n    if (onAssetUpload) {\n      setIsLoading(true)\n\n      try {\n        const uploads = Array.from(files).map((file) => onAssetUpload(file))\n        const results = await Promise.all(uploads)\n\n        onChange([...value, ...results])\n\n        toast({\n          title: 'Alert!',\n          description: `${files.length} ${files.length === 1 ? 'image' : 'images'} uploaded successfully.`,\n          icon: 'success',\n        })\n      } catch (error) {\n        toast({\n          title: 'Alert!',\n          description: `Error uploading images`,\n          icon: 'warning',\n        })\n      } finally {\n        setIsLoading(false)\n        // Reset the file input so the same files can be selected again\n        if (fileInputRef.current) {\n          fileInputRef.current.value = ''\n        }\n      }\n    }\n  }\n\n  const handleClick = () => {\n    if (!isLoading && value.length < maxImages) {\n      fileInputRef.current?.click()\n    } else if (value.length >= maxImages) {\n      toast({\n        title: 'Alert!',\n        description: `Maximum ${maxImages} images allowed.`,\n        icon: 'warning',\n      })\n    }\n  }\n\n  const removeImage = (index: number) => {\n    if (!isLoading) {\n      const newImages = [...value]\n      newImages.splice(index, 1)\n      onChange(newImages)\n    }\n  }\n\n  function onReplaceImage(data: AssetValue, index: number) {\n    const newValue = [...value]\n    newValue.splice(index, 1, data)\n    onChange(newValue)\n  }\n\n  return (\n    <div className=\"relative\">\n      {isLoading && (\n        <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70\">\n          <Spinner className=\"w-8 h-8 text-primary-1\" />\n        </div>\n      )}\n      <div className=\"relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1\">\n        <button\n          className=\"w-full\"\n          onClick={handleClick}\n          type=\"button\"\n          disabled={isLoading || value.length >= maxImages}\n        >\n          <div className=\"flex flex-col items-center gap-3 text-center\">\n            <div className=\"bg-gray-100 rounded-full\">\n              <Upload className=\"w-6 h-6 text-gray-500\" />\n            </div>\n            <Typography variant=\"body1\" className=\"text-gray-600\">\n              {isLoading\n                ? 'Uploading...'\n                : value.length >= maxImages\n                  ? `Maximum ${maxImages} images reached`\n                  : 'Add Images'}\n            </Typography>\n            {value.length > 0 && (\n              <Typography variant=\"body1\" className=\"text-gray-500\">\n                {value.length} of {maxImages} images\n              </Typography>\n            )}\n          </div>\n        </button>\n        <input\n          ref={fileInputRef}\n          id={`${id}-gallery`}\n          type=\"file\"\n          accept={accept}\n          disabled={isLoading || value.length >= maxImages}\n          onChange={handleImageSelect}\n          className=\"hidden\"\n          multiple\n        />\n\n        {error && (\n          <Typography variant=\"body1\" className=\"mt-1 text-danger-1\">\n            {error}\n          </Typography>\n        )}\n      </div>\n\n      {value.length > 0 && (\n        <div className=\"grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4\">\n          {value.map((image, index) => (\n            <div key={index} className=\"relative flex rounded\">\n              <img\n                src={image.public_url}\n                alt={`Preview ${index + 1}`}\n                className=\"object-cover w-full h-24 rounded\"\n              />\n              <button\n                onClick={() => removeImage(index)}\n                className=\"absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100\"\n                type=\"button\"\n                disabled={isLoading}\n              >\n                <X size={16} className=\"stroke-danger\" />\n              </button>\n              {onToggleImageEditor && (\n                <button\n                  type=\"button\"\n                  onClick={(e) => {\n                    e.currentTarget.blur()\n                    onToggleImageEditor({\n                      imageUrl: image.public_url,\n                      index,\n                      onReplaceImage,\n                    })\n                  }}\n                  className=\"absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100\"\n                >\n                  <Pen size={16} className=\"stroke-danger\" />\n                </button>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { MultiImagePicker }\n"],"names":["MultiImagePicker","id","onChange","value","accept","error","maxImages","onAssetUpload","onToggleImageEditor","useFormValues","toast","useToast","isLoading","setIsLoading","useState","fileInputRef","useRef","handleImageSelect","e","files","uploads","file","results","handleClick","removeImage","index","newImages","onReplaceImage","data","newValue","React","Spinner","Upload","Typography","image","X","Pen"],"mappings":"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"}

package/dist/index.es181.js

@@ -1,27 +1,112 @@
-import t from "react";
-import { SWATCHES as l } from "./index.es145.js";
-function m({ value: r, onChange: a }) {
-  return /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Color"), /* @__PURE__ */ t.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ t.createElement(
+import { Video as v, X as w } from "lucide-react";
+import e, { useState as k, useRef as A } from "react";
+import { Typography as o } from "./index.es19.js";
+import { Spinner as $ } from "./index.es64.js";
+import { useFormValues as x } from "./index.es161.js";
+import { useToast as L } from "./index.es87.js";
+const z = ({
+  id: u,
+  onChange: c,
+  value: t = [],
+  accept: f = "video/*",
+  error: d,
+  maxVideos: l = 10
+}) => {
+  const { onAssetUpload: m } = x(), { toast: i } = L(), [a, g] = k(!1), s = A(null), h = async (n) => {
+    const r = n.target.files;
+    if (!(!r?.length || a)) {
+      if (t.length + r.length > l) {
+        i({
+          title: "Alert!",
+          description: `Maximum ${l} videos allowed.`,
+          icon: "warning"
+        });
+        return;
+      }
+      if (m) {
+        g(!0);
+        try {
+          const p = Array.from(r).map((N) => m(N)), E = await Promise.all(p);
+          c([...t, ...E]), i({
+            title: "Alert!",
+            description: `${r.length} ${r.length === 1 ? "video" : "videos"} uploaded successfully.`,
+            icon: "success"
+          });
+        } catch {
+          i({
+            title: "Alert!",
+            description: "Error uploading videos",
+            icon: "warning"
+          });
+        } finally {
+          g(!1), s.current && (s.current.value = "");
+        }
+      }
+    }
+  }, y = () => {
+    !a && t.length < l ? s.current?.click() : t.length >= l && i({
+      title: "Alert!",
+      description: `Maximum ${l} videos allowed.`,
+      icon: "warning"
+    });
+  }, b = (n) => {
+    if (!a) {
+      const r = [...t];
+      r.splice(n, 1), c(r);
+    }
+  };
+  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, a && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement($, { className: "w-12 h-12 animate-spin text-primary-1" })), /* @__PURE__ */ e.createElement("div", { className: "relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1" }, /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      className: "w-full",
+      onClick: y,
+      type: "button",
+      disabled: a || t.length >= l
+    },
+    /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ e.createElement("div", { className: "bg-gray-100 rounded-full" }, /* @__PURE__ */ e.createElement(v, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(o, { variant: "body1", className: "text-gray-600" }, a ? "Uploading..." : t.length >= l ? `Maximum ${l} videos reached` : "Add Videos"), t.length > 0 && /* @__PURE__ */ e.createElement(o, { variant: "body1", className: "text-gray-500" }, t.length, " of ", l, " videos"))
+  ), /* @__PURE__ */ e.createElement(
     "input",
     {
-      type: "color",
-      value: r,
-      onChange: (e) => a(e.target.value),
-      className: "h-[34px] w-10 cursor-pointer rounded-md border border-neutral-1 bg-white p-0.5"
+      ref: s,
+      id: `${u}-gallery`,
+      type: "file",
+      accept: f,
+      disabled: a || t.length >= l,
+      onChange: h,
+      className: "hidden",
+      multiple: !0
     }
-  ), /* @__PURE__ */ t.createElement("span", { className: "text-xs text-light-4" }, r)), /* @__PURE__ */ t.createElement("div", { className: "mt-2 flex flex-wrap gap-1.5" }, l.map((e) => /* @__PURE__ */ t.createElement(
+  ), d && /* @__PURE__ */ e.createElement(o, { variant: "body1", className: "mt-1 text-danger-1" }, d)), t.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-2 md:grid-cols-2" }, t.map((n, r) => /* @__PURE__ */ e.createElement("div", { key: r, className: "relative flex rounded" }, /* @__PURE__ */ e.createElement(
+    "video",
+    {
+      src: n.public_url,
+      className: "object-cover w-full h-32 rounded",
+      controls: !0,
+      controlsList: "nodownload",
+      preload: "metadata"
+    },
+    /* @__PURE__ */ e.createElement(
+      "track",
+      {
+        kind: "captions",
+        label: "English captions",
+        srcLang: "en",
+        src: "",
+        default: !0
+      }
+    )
+  ), /* @__PURE__ */ e.createElement(
     "button",
     {
-      key: e,
+      onClick: () => b(r),
+      className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100",
       type: "button",
-      "aria-label": e,
-      onClick: () => a(e),
-      className: `h-[26px] w-[26px] rounded-md border-2 hover:border-light-2 ${r.toLowerCase() === e.toLowerCase() ? "border-rest-p1" : "border-transparent"}`,
-      style: { backgroundColor: e }
-    }
-  ))));
-}
+      disabled: a
+    },
+    /* @__PURE__ */ e.createElement(w, { size: 16, className: "stroke-danger" })
+  )))));
+};
 export {
-  m as ColorPicker
+  z as MultiVideoPicker
 };
 //# sourceMappingURL=index.es181.js.map

package/dist/index.es181.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es181.js","sources":["../src/components/organisms/image-editor/components/color-picker.tsx"],"sourcesContent":["import React from 'react'\n\nimport { SWATCHES } from '../picture-studio-engine'\n\ninterface ColorPickerProps {\n  value: string\n  onChange: (color: string) => void\n}\n\nexport function ColorPicker({ value, onChange }: ColorPickerProps) {\n  return (\n    <div>\n      <span className=\"mb-1 block text-xs text-light-4\">Color</span>\n      <div className=\"flex items-center gap-2\">\n        <input\n          type=\"color\"\n          value={value}\n          onChange={(e) => onChange(e.target.value)}\n          className=\"h-[34px] w-10 cursor-pointer rounded-md border border-neutral-1 bg-white p-0.5\"\n        />\n        <span className=\"text-xs text-light-4\">{value}</span>\n      </div>\n      <div className=\"mt-2 flex flex-wrap gap-1.5\">\n        {SWATCHES.map((color) => (\n          <button\n            key={color}\n            type=\"button\"\n            aria-label={color}\n            onClick={() => onChange(color)}\n            className={`h-[26px] w-[26px] rounded-md border-2 hover:border-light-2 ${\n              value.toLowerCase() === color.toLowerCase()\n                ? 'border-rest-p1'\n                : 'border-transparent'\n            }`}\n            style={{ backgroundColor: color }}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"names":["ColorPicker","value","onChange","React","SWATCHES","color"],"mappings":";;AASO,SAASA,EAAY,EAAE,OAAAC,GAAO,UAAAC,KAA8B;AACjE,SACEC,gBAAAA,EAAA,cAAC,OAAA,MACCA,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,kCAAA,GAAkC,OAAK,GACvDA,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,6BACbA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAAF;AAAA,MACA,UAAU,CAAC,MAAMC,EAAS,EAAE,OAAO,KAAK;AAAA,MACxC,WAAU;AAAA,IAAA;AAAA,EAAA,GAEZC,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,0BAAwBF,CAAM,CAChD,GACAE,gBAAAA,EAAA,cAAC,SAAI,WAAU,8BAAA,GACZC,EAAS,IAAI,CAACC,MACbF,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKE;AAAA,MACL,MAAK;AAAA,MACL,cAAYA;AAAA,MACZ,SAAS,MAAMH,EAASG,CAAK;AAAA,MAC7B,WAAW,8DACTJ,EAAM,YAAA,MAAkBI,EAAM,YAAA,IAC1B,mBACA,oBACN;AAAA,MACA,OAAO,EAAE,iBAAiBA,EAAA;AAAA,IAAM;AAAA,EAAA,CAEnC,CACH,CACF;AAEJ;"}
+{"version":3,"file":"index.es181.js","sources":["../src/components/ui/form-renderer/components/form-fields/components/multi-video-picker/index.tsx"],"sourcesContent":["import { X, Video } from 'lucide-react'\nimport React, { useRef, useState } from 'react'\nimport { useFormValues } from '../../../../context/form-values'\nimport { AssetValue } from '../../../../form.types'\nimport { Typography } from '@/components/atoms/typography'\nimport { useToast } from '@/components/molecules/toast'\nimport { Spinner } from '@/components/unstyled/spinner'\n\ninterface MultiVideoPickerProps {\n  id: string\n  onChange: (data: AssetValue[]) => void\n  value?: AssetValue[]\n  accept?: string\n  error?: string\n  maxVideos?: number\n}\n\nconst MultiVideoPicker: React.FC<MultiVideoPickerProps> = ({\n  id,\n  onChange,\n  value = [],\n  accept = 'video/*',\n  error,\n  maxVideos = 10,\n}) => {\n  const { onAssetUpload } = useFormValues()\n  const { toast } = useToast()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n\n  const handleVideoSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const files = e.target.files\n    if (!files?.length || isLoading) return\n\n    if (value.length + files.length > maxVideos) {\n      toast({\n        title: 'Alert!',\n        description: `Maximum ${maxVideos} videos allowed.`,\n        icon: 'warning',\n      })\n      return\n    }\n\n    if (onAssetUpload) {\n      setIsLoading(true)\n\n      try {\n        const uploads = Array.from(files).map((file) => onAssetUpload(file))\n        const results = await Promise.all(uploads)\n\n        onChange([...value, ...results])\n\n        toast({\n          title: 'Alert!',\n          description: `${files.length} ${files.length === 1 ? 'video' : 'videos'} uploaded successfully.`,\n          icon: 'success',\n        })\n      } catch (error) {\n        toast({\n          title: 'Alert!',\n          description: `Error uploading videos`,\n          icon: 'warning',\n        })\n      } finally {\n        setIsLoading(false)\n        // Reset the file input so the same files can be selected again\n        if (fileInputRef.current) {\n          fileInputRef.current.value = ''\n        }\n      }\n    }\n  }\n\n  const handleClick = () => {\n    if (!isLoading && value.length < maxVideos) {\n      fileInputRef.current?.click()\n    } else if (value.length >= maxVideos) {\n      toast({\n        title: 'Alert!',\n        description: `Maximum ${maxVideos} videos allowed.`,\n        icon: 'warning',\n      })\n    }\n  }\n\n  const removeVideo = (index: number) => {\n    if (!isLoading) {\n      const newVideos = [...value]\n      newVideos.splice(index, 1)\n      onChange(newVideos)\n    }\n  }\n\n  return (\n    <div className=\"relative\">\n      {isLoading && (\n        <div className=\"absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70\">\n          <Spinner className=\"w-12 h-12 animate-spin text-primary-1\" />\n        </div>\n      )}\n\n      <div className=\"relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1\">\n        <button\n          className=\"w-full\"\n          onClick={handleClick}\n          type=\"button\"\n          disabled={isLoading || value.length >= maxVideos}\n        >\n          <div className=\"flex flex-col items-center gap-3 text-center\">\n            <div className=\"bg-gray-100 rounded-full\">\n              <Video className=\"w-6 h-6 text-gray-500\" />\n            </div>\n            <Typography variant=\"body1\" className=\"text-gray-600\">\n              {isLoading\n                ? 'Uploading...'\n                : value.length >= maxVideos\n                  ? `Maximum ${maxVideos} videos reached`\n                  : 'Add Videos'}\n            </Typography>\n            {value.length > 0 && (\n              <Typography variant=\"body1\" className=\"text-gray-500\">\n                {value.length} of {maxVideos} videos\n              </Typography>\n            )}\n          </div>\n        </button>\n        <input\n          ref={fileInputRef}\n          id={`${id}-gallery`}\n          type=\"file\"\n          accept={accept}\n          disabled={isLoading || value.length >= maxVideos}\n          onChange={handleVideoSelect}\n          className=\"hidden\"\n          multiple\n        />\n\n        {error && (\n          <Typography variant=\"body1\" className=\"mt-1 text-danger-1\">\n            {error}\n          </Typography>\n        )}\n      </div>\n\n      {value.length > 0 && (\n        <div className=\"grid grid-cols-2 gap-4 mt-4 sm:grid-cols-2 md:grid-cols-2\">\n          {value.map((video, index) => (\n            <div key={index} className=\"relative flex rounded\">\n              <video\n                src={video.public_url}\n                className=\"object-cover w-full h-32 rounded\"\n                controls={true}\n                controlsList=\"nodownload\"\n                preload=\"metadata\"\n              >\n                <track\n                  kind=\"captions\"\n                  label=\"English captions\"\n                  srcLang=\"en\"\n                  src=\"\"\n                  default\n                />\n              </video>\n              <button\n                onClick={() => removeVideo(index)}\n                className=\"absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100\"\n                type=\"button\"\n                disabled={isLoading}\n              >\n                <X size={16} className=\"stroke-danger\" />\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { MultiVideoPicker }\n"],"names":["MultiVideoPicker","id","onChange","value","accept","error","maxVideos","onAssetUpload","useFormValues","toast","useToast","isLoading","setIsLoading","useState","fileInputRef","useRef","handleVideoSelect","e","files","uploads","file","results","handleClick","removeVideo","index","newVideos","React","Spinner","Video","Typography","video","X"],"mappings":"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"}

package/dist/index.es182.js

@@ -1,9 +1,90 @@
-import { format as o } from "date-fns";
-const m = (t) => {
-  const e = new Date(t * 1e3);
-  return o(e, "dd MMM yyyy, hh:mm a");
+import t from "react";
+import { Typography as u } from "./index.es19.js";
+import { Button as p } from "./index.es9.js";
+import { FormField as x } from "./index.es173.js";
+import { Plus as E } from "lucide-react";
+import { useFormValues as v } from "./index.es161.js";
+const R = ({ field: n }) => {
+  const { values: i, setValue: h, setFormValues: y } = v(), m = (() => {
+    const r = [], s = `${n.id}||`, o = /* @__PURE__ */ new Set();
+    Object.keys(i).forEach((e) => {
+      if (e.startsWith(s)) {
+        const a = e.match(new RegExp(`^${n.id}\\|\\|(\\d+)\\|\\|`));
+        a && a[1] && o.add(parseInt(a[1]));
+      }
+    });
+    const l = Array.from(o).sort((e, a) => e - a);
+    for (const e of l) {
+      const a = {};
+      for (const c of n.options) {
+        const d = `${n.id}||${e}||${c.id}`;
+        d in i && (a[c.id] = i[d]);
+      }
+      r.push(a);
+    }
+    return r;
+  })(), f = () => {
+    const r = m.length;
+    n.options.forEach((s) => {
+      h(`${n.id}||${r}||${s.id}`, void 0);
+    });
+  }, $ = (r) => {
+    const s = { ...i }, o = `${n.id}||`;
+    Object.keys(i).filter(
+      (e) => e.startsWith(o)
+    ).forEach((e) => {
+      const a = e.match(new RegExp(`^${n.id}\\|\\|(\\d+)\\|\\|`));
+      if (a && a[1]) {
+        const c = parseInt(a[1]);
+        if (c === r)
+          delete s[e];
+        else if (c > r) {
+          const d = e.substring(
+            e.indexOf("||", o.length)
+          ), g = `${n.id}||${c - 1}${d}`;
+          s[g] = i[e], delete s[e];
+        }
+      }
+    }), y(s);
+  };
+  return /* @__PURE__ */ t.createElement("div", { className: "flex flex-col gap-4" }, m.length === 0 && /* @__PURE__ */ t.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ t.createElement(u, { variant: "body1", className: "text-light-4" }, "No entry added yet."), /* @__PURE__ */ t.createElement(
+    p,
+    {
+      size: "sm",
+      prefixIcon: /* @__PURE__ */ t.createElement(E, { size: 20 }),
+      variant: "secondary",
+      onClick: f,
+      className: "capitalize w-fit",
+      title: "Add "
+    }
+  )), m.map((r, s) => /* @__PURE__ */ t.createElement("div", { key: `${n.id}-entry-${s}` }, /* @__PURE__ */ t.createElement("div", { className: "flex items-center justify-between mb-3" }, /* @__PURE__ */ t.createElement(u, { variant: "body2", className: "text-light-4" }, "Entry ", s + 1), /* @__PURE__ */ t.createElement(
+    p,
+    {
+      size: "sm",
+      variant: "link-secondary",
+      onClick: () => $(s),
+      className: "w-fit text-danger-1"
+    },
+    "Remove"
+  )), /* @__PURE__ */ t.createElement("div", { className: "flex flex-col gap-3" }, n.options.map((o) => {
+    const l = `${n.id}||${s}||${o.id}`, e = {
+      ...o,
+      id: l
+    };
+    return /* @__PURE__ */ t.createElement(x, { key: l, field: e });
+  })))), m.length ? /* @__PURE__ */ t.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ t.createElement(
+    p,
+    {
+      size: "sm",
+      prefixIcon: /* @__PURE__ */ t.createElement(E, { size: 20 }),
+      variant: "secondary",
+      onClick: f,
+      className: "mt-2 capitalize w-fit",
+      title: `Add more ${n.name}`
+    }
+  )) : null);
 };
 export {
-  m as convertEpochTime
+  R as RepeatableGroup
 };
 //# sourceMappingURL=index.es182.js.map

package/dist/index.es182.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es182.js","sources":["../src/components/organisms/navbar/components/notification-panel/components/notification-card/notification.utils.ts"],"sourcesContent":["import { format } from 'date-fns'\n\nconst convertEpochTime = (epochTime: number) => {\n  const date = new Date(epochTime * 1000)\n  return format(date, 'dd MMM yyyy, hh:mm a')\n}\n\nexport { convertEpochTime }\n"],"names":["convertEpochTime","epochTime","date","format"],"mappings":";AAEA,MAAMA,IAAmB,CAACC,MAAsB;AAC9C,QAAMC,IAAO,IAAI,KAAKD,IAAY,GAAI;AACtC,SAAOE,EAAOD,GAAM,sBAAsB;AAC5C;"}
+{"version":3,"file":"index.es182.js","sources":["../src/components/ui/form-renderer/components/form-fields/components/repeatable-group/index.tsx"],"sourcesContent":["// components/form-fields/RepeatableGroup.tsx\nimport React from 'react'\nimport { Typography } from '@/components/atoms/typography'\nimport { Button } from '@/components/atoms/button'\n\nimport { FormField } from '../../index' // Import your existing FormField component\nimport { useFormValues } from '../../../../context/form-values'\nimport { FormValues, RepeatableGroupField } from '../../../../form.types'\nimport { Plus } from 'lucide-react'\n\ninterface FormFieldProps {\n  field: RepeatableGroupField\n}\n\nexport const RepeatableGroup: React.FC<FormFieldProps> = ({ field }) => {\n  const { values, setValue, setFormValues } = useFormValues()\n\n  // Get all entries for this repeatable group\n  const getEntries = () => {\n    const entries: FormValues[] = []\n    const prefix = `${field.id}||`\n\n    // Find all entry indices in one pass\n    const entryIndices = new Set<number>()\n    Object.keys(values).forEach((key) => {\n      if (key.startsWith(prefix)) {\n        const match = key.match(new RegExp(`^${field.id}\\\\|\\\\|(\\\\d+)\\\\|\\\\|`))\n        if (match && match[1]) {\n          entryIndices.add(parseInt(match[1]))\n        }\n      }\n    })\n\n    // Sort indices numerically\n    const sortedIndices = Array.from(entryIndices).sort((a, b) => a - b)\n\n    // Build entry objects\n    for (const index of sortedIndices) {\n      const entryObject: FormValues = {}\n\n      // Collect all subfields for this entry\n      for (const subField of field.options) {\n        const key = `${field.id}||${index}||${subField.id}`\n        if (key in values) {\n          entryObject[subField.id] = values[key]\n        }\n      }\n\n      entries.push(entryObject)\n    }\n\n    return entries\n  }\n\n  const entries = getEntries()\n\n  const handleAddEntry = () => {\n    const newIndex = entries.length\n    // Initialize new entry by setting values for each subfield\n    field.options.forEach((subField) => {\n      setValue(`${field.id}||${newIndex}||${subField.id}`, undefined)\n    })\n  }\n\n  const handleRemoveEntry = (indexToRemove: number) => {\n    const newValues = { ...values }\n\n    // Step 1: Find all keys associated with all entries of this repeatable group\n    const groupPrefix = `${field.id}||`\n    const allGroupKeys = Object.keys(values).filter((key) =>\n      key.startsWith(groupPrefix)\n    )\n\n    // Step 2: Process each key - either remove it or reindex it\n    allGroupKeys.forEach((key) => {\n      // Extract entry index from the key\n      const match = key.match(new RegExp(`^${field.id}\\\\|\\\\|(\\\\d+)\\\\|\\\\|`))\n      if (match && match[1]) {\n        const entryIndex = parseInt(match[1])\n\n        if (entryIndex === indexToRemove) {\n          // Delete keys for the entry being removed\n          delete newValues[key]\n        } else if (entryIndex > indexToRemove) {\n          // Reindex entries that come after the removed one\n          const remainingPart = key.substring(\n            key.indexOf('||', groupPrefix.length)\n          )\n\n          const newKey = `${field.id}||${entryIndex - 1}${remainingPart}`\n\n          // Copy the value to the new index\n          newValues[newKey] = values[key]\n\n          // Remove the old key\n          delete newValues[key]\n        }\n      }\n    })\n\n    // Update form values with a single call\n    setFormValues(newValues)\n  }\n\n  // Rest of your component remains largely the same\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {entries.length === 0 && (\n        <div className=\"flex items-center justify-between\">\n          <Typography variant={'body1'} className=\"text-light-4\">\n            No entry added yet.\n          </Typography>\n          <Button\n            size=\"sm\"\n            prefixIcon={<Plus size={20} />}\n            variant=\"secondary\"\n            onClick={handleAddEntry}\n            className=\"capitalize w-fit\"\n            title={`Add `}\n          />\n        </div>\n      )}\n\n      {entries.map((_, entryIndex) => (\n        <div key={`${field.id}-entry-${entryIndex}`}>\n          <div className=\"flex items-center justify-between mb-3\">\n            <Typography variant=\"body2\" className=\"text-light-4\">\n              Entry {entryIndex + 1}\n            </Typography>\n            <Button\n              size=\"sm\"\n              variant=\"link-secondary\"\n              onClick={() => handleRemoveEntry(entryIndex)}\n              className=\"w-fit text-danger-1\"\n            >\n              Remove\n            </Button>\n          </div>\n\n          <div className=\"flex flex-col gap-3\">\n            {field.options.map((subField) => {\n              const uniqueId = `${field.id}||${entryIndex}||${subField.id}`\n              const modifiedField = {\n                ...subField,\n                id: uniqueId,\n              }\n              return <FormField key={uniqueId} field={modifiedField} />\n            })}\n          </div>\n        </div>\n      ))}\n      {entries.length ? (\n        <div className=\"flex justify-end\">\n          <Button\n            size=\"sm\"\n            prefixIcon={<Plus size={20} />}\n            variant=\"secondary\"\n            onClick={handleAddEntry}\n            className=\"mt-2 capitalize w-fit\"\n            title={`Add more ${field.name}`}\n          />\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"names":["RepeatableGroup","field","values","setValue","setFormValues","useFormValues","entries","prefix","entryIndices","key","match","sortedIndices","a","b","index","entryObject","subField","handleAddEntry","newIndex","handleRemoveEntry","indexToRemove","newValues","groupPrefix","entryIndex","remainingPart","newKey","React","Typography","Button","Plus","_","uniqueId","modifiedField","FormField"],"mappings":"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"}

package/dist/index.es183.js

@@ -0,0 +1,133 @@
+import { Typography as g } from "./index.es19.js";
+import { Spinner as $ } from "./index.es64.js";
+import { SingleCombobox as x } from "./index.es27.js";
+import { Upload as T, Pen as R, X as S } from "lucide-react";
+import e, { useState as _, useRef as C } from "react";
+import { useFormValues as M } from "./index.es161.js";
+import { useToast as P } from "./index.es87.js";
+const X = ({
+  id: h,
+  onChange: c,
+  value: l = [],
+  accept: y = "image/*",
+  error: p,
+  maxImages: a = 20,
+  options: E
+}) => {
+  const { onAssetUpload: u, onToggleImageEditor: f } = M(), { toast: o } = P(), [n, b] = _(!1), m = C(null), N = async (s) => {
+    const t = s.target.files;
+    if (!(!t?.length || n)) {
+      if (l.length + t.length > a) {
+        o({
+          title: "Alert!",
+          description: `Maximum ${a} images allowed.`,
+          icon: "warning"
+        });
+        return;
+      }
+      if (u) {
+        b(!0);
+        try {
+          const r = Array.from(t).map((d) => u(d)), A = (await Promise.all(r)).map((d) => ({ ...d, tag: "" }));
+          c([...l, ...A]), o({
+            title: "Alert!",
+            description: `${t.length} ${t.length === 1 ? "image" : "images"} uploaded successfully.`,
+            icon: "success"
+          });
+        } catch {
+          o({
+            title: "Alert!",
+            description: "Error uploading images",
+            icon: "warning"
+          });
+        } finally {
+          b(!1), m.current && (m.current.value = "");
+        }
+      }
+    }
+  }, w = () => {
+    !n && l.length < a ? m.current?.click() : l.length >= a && o({
+      title: "Alert!",
+      description: `Maximum ${a} images allowed.`,
+      icon: "warning"
+    });
+  }, k = (s) => {
+    if (!n) {
+      const t = [...l];
+      t.splice(s, 1), c(t);
+    }
+  }, v = (s, t) => {
+    const r = [...l], i = r[t];
+    r.splice(t, 1, { ...i, ...s }), c(r);
+  };
+  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, n && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement($, { className: "w-8 h-8 text-primary-1" })), /* @__PURE__ */ e.createElement("div", { className: "relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1" }, /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      className: "w-full",
+      onClick: w,
+      type: "button",
+      disabled: n || l.length >= a
+    },
+    /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ e.createElement("div", { className: "bg-gray-100 rounded-full" }, /* @__PURE__ */ e.createElement(T, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-600" }, n ? "Uploading..." : l.length >= a ? `Maximum ${a} images reached` : "Add Images"), l.length > 0 && /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-500" }, l.length, " of ", a, " images"))
+  ), /* @__PURE__ */ e.createElement(
+    "input",
+    {
+      ref: m,
+      id: `${h}-gallery`,
+      type: "file",
+      accept: y,
+      disabled: n || l.length >= a,
+      onChange: N,
+      className: "hidden",
+      multiple: !0
+    }
+  ), p && /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "mt-1 text-danger-1" }, p)), l.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4" }, l.map((s, t) => /* @__PURE__ */ e.createElement("div", { key: s.private_url, className: "flex flex-col gap-2" }, /* @__PURE__ */ e.createElement("div", { key: t, className: "relative flex rounded" }, /* @__PURE__ */ e.createElement(
+    "img",
+    {
+      src: s.public_url,
+      alt: `Preview ${t + 1}`,
+      className: "object-cover w-full h-24 rounded"
+    }
+  ), f && /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: (r) => {
+        r.currentTarget.blur(), f({
+          imageUrl: s.public_url,
+          index: t,
+          onReplaceImage: v
+        });
+      },
+      className: "absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100"
+    },
+    /* @__PURE__ */ e.createElement(R, { size: 16, className: "stroke-danger" })
+  ), /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      onClick: () => k(t),
+      className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100",
+      type: "button",
+      disabled: n
+    },
+    /* @__PURE__ */ e.createElement(S, { size: 16, className: "stroke-danger" })
+  )), /* @__PURE__ */ e.createElement(
+    x,
+    {
+      options: E.map((r) => ({
+        id: r,
+        name: r
+      })),
+      value: s.tag,
+      onChange: (r) => {
+        const i = [...l];
+        i[t].tag = r, c(i);
+      },
+      placeholder: "Select "
+    }
+  )))));
+};
+export {
+  X as TaggableMultiImagePicker
+};
+//# sourceMappingURL=index.es183.js.map