geoiq-frontend-ui-kit 2.0.0 → 2.0.2

package/dist/index.es136.js

@@ -1,85 +1,43 @@
-import { Typography as u } from "./index.es17.js";
-import e, { useState as v, useRef as N } from "react";
-import "./index.es32.js";
-import { useToast as h } from "./index.es79.js";
-import { Spinner as x } from "./index.es57.js";
-import { Upload as _, X as w, Pen as k } from "lucide-react";
-import { useFormValues as I } from "./index.es130.js";
-const j = ({
-  id: g,
-  onChange: r,
-  value: t,
-  accept: f = "image/*",
-  error: c
-}) => {
-  const { onAssetUpload: s, onToggleImageEditor: o } = I(), { toast: n } = h(), [a, m] = v(!1), l = N(null), b = (i) => {
-    const d = i.target.files?.[0];
-    !d || a || s && (m(!0), s(d).then((p) => {
-      r({ ...p, original_private_url: p.private_url }), n({
-        title: "Alert!",
-        description: "File uploaded successfully.",
-        icon: "success"
-      });
-    }).catch(() => {
-      r(void 0), n({
-        title: "Alert!",
-        description: "Error uploading file",
-        icon: "warning"
-      });
-    }).finally(() => {
-      m(!1), l.current && (l.current.value = "");
-    }));
-  }, y = (i) => {
-    r({
-      ...i,
-      original_private_url: t?.original_private_url ?? t?.private_url
-    });
-  }, E = () => {
-    a || l.current?.click();
-  };
-  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(x, { 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: E }, /* @__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(_, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(u, { variant: "body1", className: "text-gray-600" }, a ? "Uploading..." : t ? "Replace Image" : "Attach Image"))), /* @__PURE__ */ e.createElement(
-    "input",
-    {
-      ref: l,
-      id: `${g}-gallery`,
-      type: "file",
-      accept: f,
-      disabled: a,
-      onChange: b,
-      className: "hidden"
-    }
-  ), c && /* @__PURE__ */ e.createElement(u, { variant: "body1", className: "mt-1 text-danger-1" }, c)), t && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4" }, /* @__PURE__ */ e.createElement("div", { className: "relative flex rounded" }, /* @__PURE__ */ e.createElement(
-    "img",
-    {
-      src: t.public_url,
-      alt: "Preview",
-      className: "object-cover w-full h-24 rounded"
-    }
-  ), /* @__PURE__ */ e.createElement(
-    "button",
-    {
-      onClick: () => {
-        a || r(void 0);
+import { cva as t } from "class-variance-authority";
+const e = t(
+  "inline-flex items-center justify-evenly p-1 text-muted-foreground",
+  {
+    variants: {
+      variant: {
+        primary: "bg-light-3 border rounded-xl  border-neutral-1",
+        secondary: "bg-background "
       },
-      className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100"
+      size: {
+        sm: "h-10 rounded-xl ",
+        md: "h-12 rounded-xl "
+      }
     },
-    /* @__PURE__ */ e.createElement(w, { size: 16, className: "stroke-danger" })
-  ), o && /* @__PURE__ */ e.createElement(
-    "button",
-    {
-      onClick: () => {
-        o({
-          imageUrl: t.public_url,
-          index: -1,
-          onReplaceImage: y
-        });
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+), i = t(
+  "inline-flex w-full items-center justify-center whitespace-nowrap text-sm text-light-2 font-medium  disabled:pointer-events-none disabled:opacity-50  ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-[14px] p-1.5 ",
+        md: "h-10 text-[16px] p-2 "
       },
-      className: "absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100"
+      variant: {
+        primary: "rounded-lg data-[state=active]:bg-rest-s1 data-[state=active]:text-primary-1 data-[state=active]:border data-[state=active]:border-neutral-1 data-[state=active]:font-semibold data-[state=active]:shadow-sm ",
+        secondary: "data-[state=active]:bg-background data-[state=active]:text-primary-1 data-[state=active]:font-semibold data-[state=active]:border-b-2 data-[state=active]:border-primary-2 "
+      }
     },
-    /* @__PURE__ */ e.createElement(k, { size: 16, className: "stroke-danger" })
-  ))));
-};
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
 export {
-  j as SingleImagePicker
+  i as TabTriggerVariants,
+  e as TabsVariants
 };
 //# sourceMappingURL=index.es136.js.map

package/dist/index.es136.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es136.js","sources":["../src/components/ui/form-renderer/components/form-fields/components/single-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 ImagePickerProps {\n  id: string\n  onChange: (data?: AssetValue) => void\n  value?: AssetValue\n  accept?: string\n  error?: string\n}\n\nconst SingleImagePicker: React.FC<ImagePickerProps> = ({\n  id,\n  onChange,\n  value,\n  accept = 'image/*',\n  error,\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 = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0]\n    if (!file || isLoading) return\n    if (onAssetUpload) {\n      setIsLoading(true)\n      onAssetUpload(file)\n        .then((data: AssetValue) => {\n          onChange({ ...data, original_private_url: data.private_url })\n\n          toast({\n            title: 'Alert!',\n            description: `File uploaded successfully.`,\n            icon: 'success',\n          })\n        })\n        .catch(() => {\n          onChange(undefined)\n          toast({\n            title: 'Alert!',\n            description: `Error uploading file`,\n            icon: 'warning',\n          })\n        })\n        .finally(() => {\n          setIsLoading(false)\n          // Reset the file input so the same file can be selected again\n          if (fileInputRef.current) {\n            fileInputRef.current.value = ''\n          }\n        })\n    }\n  }\n\n  const onReplaceImage = (data: AssetValue) => {\n    onChange({\n      ...data,\n      original_private_url: value?.original_private_url ?? value?.private_url,\n    })\n  }\n\n  const handleClick = () => {\n    if (!isLoading) {\n      fileInputRef.current?.click()\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-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 className=\"w-full\" onClick={handleClick}>\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\n                  ? 'Replace Image'\n                  : 'Attach Image'}\n            </Typography>\n          </div>\n        </button>\n        <input\n          ref={fileInputRef}\n          id={`${id}-gallery`}\n          type=\"file\"\n          accept={accept}\n          disabled={isLoading}\n          onChange={handleImageSelect}\n          className=\"hidden\"\n        />\n\n        {error && (\n          <Typography variant=\"body1\" className=\"mt-1 text-danger-1\">\n            {error}\n          </Typography>\n        )}\n      </div>\n      {value && (\n        <div className=\"grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4\">\n          <div className=\"relative flex rounded\">\n            <img\n              src={value.public_url}\n              alt=\"Preview\"\n              className=\"object-cover w-full h-24 rounded\"\n            />\n            <button\n              onClick={() => {\n                if (!isLoading) {\n                  onChange(undefined)\n                }\n              }}\n              className=\"absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100\"\n            >\n              <X size={16} className=\"stroke-danger\" />\n            </button>\n            {onToggleImageEditor && (\n              <button\n                onClick={() => {\n                  onToggleImageEditor({\n                    imageUrl: value.public_url,\n                    index: -1,\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        </div>\n      )}\n    </div>\n  )\n}\n\nexport { SingleImagePicker }\n"],"names":["SingleImagePicker","id","onChange","value","accept","error","onAssetUpload","onToggleImageEditor","useFormValues","toast","useToast","isLoading","setIsLoading","useState","fileInputRef","useRef","handleImageSelect","e","file","data","onReplaceImage","handleClick","React","Spinner","Upload","Typography","X","Pen"],"mappings":";;;;;;;AAgBA,MAAMA,IAAgD,CAAC;AAAA,EACrD,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC;AACF,MAAM;AACJ,QAAM,EAAE,eAAAC,GAAe,qBAAAC,EAAA,IAAwBC,EAAA,GACzC,EAAE,OAAAC,EAAA,IAAUC,EAAA,GAEZ,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAeC,EAAyB,IAAI,GAE5CC,IAAoB,CAACC,MAA2C;AACpE,UAAMC,IAAOD,EAAE,OAAO,QAAQ,CAAC;AAC/B,IAAI,CAACC,KAAQP,KACTL,MACFM,EAAa,EAAI,GACjBN,EAAcY,CAAI,EACf,KAAK,CAACC,MAAqB;AAC1B,MAAAjB,EAAS,EAAE,GAAGiB,GAAM,sBAAsBA,EAAK,aAAa,GAE5DV,EAAM;AAAA,QACJ,OAAO;AAAA,QACP,aAAa;AAAA,QACb,MAAM;AAAA,MAAA,CACP;AAAA,IACH,CAAC,EACA,MAAM,MAAM;AACX,MAAAP,EAAS,MAAS,GAClBO,EAAM;AAAA,QACJ,OAAO;AAAA,QACP,aAAa;AAAA,QACb,MAAM;AAAA,MAAA,CACP;AAAA,IACH,CAAC,EACA,QAAQ,MAAM;AACb,MAAAG,EAAa,EAAK,GAEdE,EAAa,YACfA,EAAa,QAAQ,QAAQ;AAAA,IAEjC,CAAC;AAAA,EAEP,GAEMM,IAAiB,CAACD,MAAqB;AAC3C,IAAAjB,EAAS;AAAA,MACP,GAAGiB;AAAA,MACH,sBAAsBhB,GAAO,wBAAwBA,GAAO;AAAA,IAAA,CAC7D;AAAA,EACH,GAEMkB,IAAc,MAAM;AACxB,IAAKV,KACHG,EAAa,SAAS,MAAA;AAAA,EAE1B;AAEA,SACEQ,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,WAAA,GACZX,qCACE,OAAA,EAAI,WAAU,gFAAA,GACbW,gBAAAA,EAAA,cAACC,GAAA,EAAQ,WAAU,0BAAyB,CAC9C,GAEFD,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,+EAAA,mCACZ,UAAA,EAAO,WAAU,UAAS,SAASD,EAAA,GAClCC,gBAAAA,EAAA,cAAC,SAAI,WAAU,+CAAA,GACbA,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,2BAAA,mCACZE,GAAA,EAAO,WAAU,wBAAA,CAAwB,CAC5C,GACAF,gBAAAA,EAAA,cAACG,KAAW,SAAQ,SAAQ,WAAU,gBAAA,GACnCd,IACG,iBACAR,IACE,kBACA,cACR,CACF,CACF,GACAmB,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKR;AAAA,MACL,IAAI,GAAGb,CAAE;AAAA,MACT,MAAK;AAAA,MACL,QAAAG;AAAA,MACA,UAAUO;AAAA,MACV,UAAUK;AAAA,MACV,WAAU;AAAA,IAAA;AAAA,EAAA,GAGXX,KACCiB,gBAAAA,EAAA,cAACG,KAAW,SAAQ,SAAQ,WAAU,qBAAA,GACnCpB,CACH,CAEJ,GACCF,qCACE,OAAA,EAAI,WAAU,+DACbmB,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,wBAAA,GACbA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKnB,EAAM;AAAA,MACX,KAAI;AAAA,MACJ,WAAU;AAAA,IAAA;AAAA,EAAA,GAEZmB,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAM;AACb,QAAKX,KACHT,EAAS,MAAS;AAAA,MAEtB;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,IAEVoB,gBAAAA,EAAA,cAACI,GAAA,EAAE,MAAM,IAAI,WAAU,gBAAA,CAAgB;AAAA,EAAA,GAExCnB,KACCe,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAM;AACb,QAAAf,EAAoB;AAAA,UAClB,UAAUJ,EAAM;AAAA,UAChB,OAAO;AAAA,UACP,gBAAAiB;AAAA,QAAA,CACD;AAAA,MACH;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,IAEVE,gBAAAA,EAAA,cAACK,GAAA,EAAI,MAAM,IAAI,WAAU,gBAAA,CAAgB;AAAA,EAAA,CAG/C,CACF,CAEJ;AAEJ;"}
+{"version":3,"file":"index.es136.js","sources":["../src/components/molecules/tabs/tabs.styles.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const TabsVariants = cva(\n  'inline-flex items-center justify-evenly p-1 text-muted-foreground',\n  {\n    variants: {\n      variant: {\n        primary: 'bg-light-3 border rounded-xl  border-neutral-1',\n        secondary: 'bg-background ',\n      },\n      size: {\n        sm: 'h-10 rounded-xl ',\n        md: 'h-12 rounded-xl ',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  }\n)\n\nexport const TabTriggerVariants = cva(\n  'inline-flex w-full items-center justify-center whitespace-nowrap text-sm text-light-2 font-medium  disabled:pointer-events-none disabled:opacity-50  ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ',\n  {\n    variants: {\n      size: {\n        sm: 'h-8 text-[14px] p-1.5 ',\n        md: 'h-10 text-[16px] p-2 ',\n      },\n      variant: {\n        primary:\n          'rounded-lg data-[state=active]:bg-rest-s1 data-[state=active]:text-primary-1 data-[state=active]:border data-[state=active]:border-neutral-1 data-[state=active]:font-semibold data-[state=active]:shadow-sm ',\n        secondary:\n          'data-[state=active]:bg-background data-[state=active]:text-primary-1 data-[state=active]:font-semibold data-[state=active]:border-b-2 data-[state=active]:border-primary-2 ',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  }\n)\n"],"names":["TabsVariants","cva","TabTriggerVariants"],"mappings":";AAEO,MAAMA,IAAeC;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,MAAA;AAAA,MAEb,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAEaC,IAAqBD;AAAA,EAChC;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;"}

package/dist/index.es137.js

@@ -1,79 +1,5 @@
-import { Typography as d } from "./index.es17.js";
-import { Spinner as y } from "./index.es57.js";
-import { Video as h, X as N } from "lucide-react";
-import e, { useState as x, useRef as m } from "react";
-import { useFormValues as k } from "./index.es130.js";
-import { useToast as w } from "./index.es79.js";
-const j = ({
-  id: u,
-  onChange: r,
-  value: l,
-  accept: p = "video/*",
-  error: i
-}) => {
-  const { onAssetUpload: c } = k(), { toast: s } = w(), [t, o] = x(!1), a = m(null), f = m(null), g = (v) => {
-    const n = v.target.files?.[0];
-    !n || t || c && (o(!0), c(n).then((b) => {
-      r(b), s({
-        title: "Alert!",
-        description: "Video uploaded successfully.",
-        icon: "success"
-      });
-    }).catch(() => {
-      r(void 0), s({
-        title: "Alert!",
-        description: "Error uploading video",
-        icon: "warning"
-      });
-    }).finally(() => {
-      o(!1), a.current && (a.current.value = "");
-    }));
-  }, E = () => {
-    t || a.current?.click();
-  };
-  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, t && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement(y, { 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: E }, /* @__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(h, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(d, { variant: "body1", className: "text-gray-600" }, t ? "Uploading..." : l ? "Replace Video" : "Attach Video"))), /* @__PURE__ */ e.createElement(
-    "input",
-    {
-      ref: a,
-      id: `${u}-gallery`,
-      type: "file",
-      accept: p,
-      disabled: t,
-      onChange: g,
-      className: "hidden"
-    }
-  ), i && /* @__PURE__ */ e.createElement(d, { variant: "body1", className: "mt-1 text-danger-1" }, i)), l && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-2 md:grid-cols-2" }, /* @__PURE__ */ e.createElement("div", { className: "relative flex  rounded" }, /* @__PURE__ */ e.createElement(
-    "video",
-    {
-      ref: f,
-      src: l.public_url,
-      className: "object-cover 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",
-    {
-      onClick: () => {
-        t || r(void 0);
-      },
-      className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100"
-    },
-    /* @__PURE__ */ e.createElement(N, { size: 16, className: "stroke-danger" })
-  ))));
-};
+const a = "Plus Jakarta Sans";
 export {
-  j as SingleVideoPicker
+  a as FONT_FAMILY
 };
 //# sourceMappingURL=index.es137.js.map

package/dist/index.es137.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es137.js","sources":["../src/components/ui/form-renderer/components/form-fields/components/single-video-picker/index.tsx"],"sourcesContent":["import { Typography } from '@/components/atoms/typography'\nimport { useToast } from '@/components/molecules/toast'\nimport { Spinner } from '@/components/unstyled/spinner'\nimport { X, Video } from 'lucide-react'\nimport React, { useRef, useState } from 'react'\nimport { useFormValues } from '../../../../context/form-values'\nimport { AssetValue } from '../../../../form.types'\n\ninterface VideoPickerProps {\n  id: string\n  onChange: (data?: AssetValue) => void\n  value?: AssetValue\n  accept?: string\n  error?: string\n}\n\nconst SingleVideoPicker: React.FC<VideoPickerProps> = ({\n  id,\n  onChange,\n  value,\n  accept = 'video/*',\n  error,\n}) => {\n  const { onAssetUpload } = useFormValues()\n  const { toast } = useToast()\n\n  const [isLoading, setIsLoading] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const videoElRef = useRef<HTMLVideoElement>(null)\n\n  const handleVideoSelect = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0]\n    if (!file || isLoading) return\n    if (onAssetUpload) {\n      setIsLoading(true)\n      onAssetUpload(file)\n        .then((data: AssetValue) => {\n          onChange(data)\n\n          toast({\n            title: 'Alert!',\n            description: `Video uploaded successfully.`,\n            icon: 'success',\n          })\n        })\n        .catch(() => {\n          onChange(undefined)\n          toast({\n            title: 'Alert!',\n            description: `Error uploading video`,\n            icon: 'warning',\n          })\n        })\n        .finally(() => {\n          setIsLoading(false)\n          // Reset the file input so the same video can be selected again\n          if (fileInputRef.current) {\n            fileInputRef.current.value = ''\n          }\n        })\n    }\n  }\n\n  const handleClick = () => {\n    if (!isLoading) {\n      fileInputRef.current?.click()\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-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 className=\"w-full\" onClick={handleClick}>\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\n                  ? 'Replace Video'\n                  : 'Attach Video'}\n            </Typography>\n          </div>\n        </button>\n        <input\n          ref={fileInputRef}\n          id={`${id}-gallery`}\n          type=\"file\"\n          accept={accept}\n          disabled={isLoading}\n          onChange={handleVideoSelect}\n          className=\"hidden\"\n        />\n\n        {error && (\n          <Typography variant=\"body1\" className=\"mt-1 text-danger-1\">\n            {error}\n          </Typography>\n        )}\n      </div>\n      {value && (\n        <div className=\"grid grid-cols-2 gap-4 mt-4 sm:grid-cols-2 md:grid-cols-2\">\n          <div className=\"relative flex  rounded\">\n            <video\n              ref={videoElRef}\n              src={value.public_url}\n              className=\"object-cover h-32 rounded\"\n              controls={true}\n              controlsList=\"nodownload\"\n              preload=\"metadata\"\n            >\n              {/* Add caption track for accessibility */}\n              <track\n                kind=\"captions\"\n                label=\"English captions\"\n                srcLang=\"en\"\n                src=\"\"\n                default\n              />\n            </video>\n            <button\n              onClick={() => {\n                if (!isLoading) {\n                  onChange(undefined)\n                }\n              }}\n              className=\"absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100\"\n            >\n              <X size={16} className=\"stroke-danger\" />\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { SingleVideoPicker }\n"],"names":["SingleVideoPicker","id","onChange","value","accept","error","onAssetUpload","useFormValues","toast","useToast","isLoading","setIsLoading","useState","fileInputRef","useRef","videoElRef","handleVideoSelect","e","file","data","handleClick","React","Spinner","Video","Typography","X"],"mappings":"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"}
+{"version":3,"file":"index.es137.js","sources":["../src/lib/constants.ts"],"sourcesContent":["export const FONT_FAMILY = 'Plus Jakarta Sans'\n"],"names":["FONT_FAMILY"],"mappings":"AAAO,MAAMA,IAAc;"}

package/dist/index.es138.js

@@ -1,117 +1,28 @@
-import { Typography as m } from "./index.es17.js";
-import { Spinner as v } from "./index.es57.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.es130.js";
-import { useToast as U } from "./index.es79.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 } = U(), [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;
+import { cva as e } from "class-variance-authority";
+const t = e(
+  "w-auto min-w-[50px] h-5 flex items-center justify-center gap-2 px-1 py-0.5 rounded-[4px]",
+  {
+    variants: {
+      trend: {
+        1: "bg-success-1 border border-success-1",
+        "-1": "bg-danger-1 border border-danger-1",
+        0: "",
+        null: ""
       }
-      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",
-    {
-      className: "w-full",
-      onClick: b,
-      type: "button",
-      disabled: a || l.length >= r
-    },
-    /* @__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"
+), s = e("text-sm", {
+  variants: {
+    trend: {
+      1: "text-success-1",
+      "-1": "text-danger-1",
+      0: "",
+      null: ""
     }
-  ), /* @__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",
-    {
-      onClick: () => {
-        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 MultiImagePicker
+  t as trendBoxStyles,
+  s as trendValueStyles
 };
 //# sourceMappingURL=index.es138.js.map

package/dist/index.es138.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es138.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                  onClick={() => {\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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"}
+{"version":3,"file":"index.es138.js","sources":["../src/components/ui/report-snippet-view/report-snippet-view-style.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\n\nexport const trendBoxStyles = cva(\n  'w-auto min-w-[50px] h-5 flex items-center justify-center gap-2 px-1 py-0.5 rounded-[4px]',\n  {\n    variants: {\n      trend: {\n        '1': 'bg-success-1 border border-success-1',\n        '-1': 'bg-danger-1 border border-danger-1',\n        '0': '',\n        null: '',\n      },\n    },\n  }\n)\n\nexport const trendValueStyles = cva('text-sm', {\n  variants: {\n    trend: {\n      '1': 'text-success-1',\n      '-1': 'text-danger-1',\n      '0': '',\n      null: '',\n    },\n  },\n})\n"],"names":["trendBoxStyles","cva","trendValueStyles"],"mappings":";AAEO,MAAMA,IAAiBC;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAK;AAAA,QACL,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAEJ,GAEaC,IAAmBD,EAAI,WAAW;AAAA,EAC7C,UAAU;AAAA,IACR,OAAO;AAAA,MACL,GAAK;AAAA,MACL,MAAM;AAAA,MACN,GAAK;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,CAAC;"}

package/dist/index.es139.js

@@ -1,112 +1,19 @@
-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.es17.js";
-import { Spinner as $ } from "./index.es57.js";
-import { useFormValues as x } from "./index.es130.js";
-import { useToast as L } from "./index.es79.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;
+import { cva as r } from "class-variance-authority";
+import { StepItemStatus as e } from "./index.es31.js";
+const o = r(
+  "h-8 w-8 border-2 flex items-center justify-center rounded-full cursor-pointer trasnition-all",
+  {
+    variants: {
+      variant: {
+        pending: "border-neutral-2 ",
+        current: "bg-primary-1 border-primary-2 hover:bg-hover-t1 active:bg-click-t1",
+        completed: "bg-rest-p1 hover:bg-hover-p1 active:bg-click-p1 border-none"
       }
-      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",
-    {
-      ref: s,
-      id: `${u}-gallery`,
-      type: "file",
-      accept: f,
-      disabled: a || t.length >= l,
-      onChange: h,
-      className: "hidden",
-      multiple: !0
-    }
-  ), 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",
-    {
-      onClick: () => b(r),
-      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(w, { size: 16, className: "stroke-danger" })
-  )))));
-};
+    defaultVariants: { variant: e.PENDING }
+  }
+);
 export {
-  z as MultiVideoPicker
+  o as StepItemVariants
 };
 //# sourceMappingURL=index.es139.js.map

package/dist/index.es139.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es139.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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"}
+{"version":3,"file":"index.es139.js","sources":["../src/components/molecules/stepper/stepper.styles.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport { StepItemStatus } from './stepper.type'\nexport const StepItemVariants = cva(\n  'h-8 w-8 border-2 flex items-center justify-center rounded-full cursor-pointer trasnition-all',\n  {\n    variants: {\n      variant: {\n        pending: 'border-neutral-2 ',\n        current:\n          'bg-primary-1 border-primary-2 hover:bg-hover-t1 active:bg-click-t1',\n        completed:\n          'bg-rest-p1 hover:bg-hover-p1 active:bg-click-p1 border-none',\n      },\n    },\n    defaultVariants: { variant: StepItemStatus.PENDING },\n  }\n)\n"],"names":["StepItemVariants","cva","StepItemStatus"],"mappings":";;AAEO,MAAMA,IAAmBC;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB,EAAE,SAASC,EAAe,QAAA;AAAA,EAAQ;AAEvD;"}