geoiq-frontend-ui-kit 2.0.1 → 2.0.2

package/dist/index.es179.js

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

package/dist/index.es179.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es179.js","sources":["../src/components/ui/form-renderer/components/form-fields/components/taggable-multi-image-picker-with-input/index.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Input } from '@/components/atoms/input'\nimport { Typography } from '@/components/atoms/typography'\nimport { useToast } from '@/components/molecules/toast'\nimport { useFormValues } from '@/components/ui/form-renderer/context/form-values'\nimport {\n  AssetValue,\n  TaggableAssetValue,\n} from '@/components/ui/form-renderer/form.types'\nimport { Spinner } from '@/components/unstyled/spinner'\nimport { Upload, X, Pen } from 'lucide-react'\nimport { useRef, useState } from 'react'\n\ninterface TaggableImageUploadFieldWithInputProps {\n  id: string\n  onChange: (data: TaggableAssetValue[]) => void\n  value?: TaggableAssetValue[]\n  accept?: string\n  error?: string\n  maxImages?: number\n  placeholder?: string\n}\n\nconst TaggableImageUploadFieldWithInput: React.FC<\n  TaggableImageUploadFieldWithInputProps\n> = ({\n  id,\n  onChange,\n  value = [],\n  accept = 'image/*',\n  error,\n  maxImages = 20,\n  placeholder,\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        const TaggedResults = results.map((result) => ({ ...result, tag: '' }))\n\n        onChange([...value, ...TaggedResults])\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  const onReplaceImage = (data: AssetValue, index: number) => {\n    const newValue = [...value]\n    const existingImage = newValue[index]\n\n    newValue.splice(index, 1, { ...existingImage, ...data })\n    onChange(newValue)\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={image.private_url} className=\"flex flex-col gap-2\">\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                {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                <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              </div>\n              <Input\n                id={id + index}\n                type=\"text\"\n                placeholder={placeholder ? placeholder : ''}\n                value={image.tag}\n                required={true}\n                onChange={(e) => {\n                  const newImages = [...value]\n                  newImages[index].tag = e.target.value\n                  onChange(newImages)\n                }}\n              />\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { TaggableImageUploadFieldWithInput }\n"],"names":["TaggableImageUploadFieldWithInput","id","onChange","value","accept","error","maxImages","placeholder","onAssetUpload","onToggleImageEditor","useFormValues","toast","useToast","isLoading","setIsLoading","useState","fileInputRef","useRef","handleImageSelect","e","files","uploads","file","TaggedResults","result","handleClick","removeImage","index","newImages","onReplaceImage","data","newValue","existingImage","React","Spinner","Upload","Typography","image","Pen","X","Input"],"mappings":"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"}

package/dist/index.es18.js

@@ -1,77 +1,27 @@
-import * as e from "react";
-import { cn as s } from "./index.es81.js";
-import { AlertVariants as v, AlertContentVariants as h, AlertButtonVariants as u } from "./index.es96.js";
-import { Button as _ } from "./index.es7.js";
-import { Typography as N } from "./index.es17.js";
-const n = e.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e.createElement(
-  "h5",
-  {
-    ref: a,
-    className: s("mb-1 font-medium leading-none tracking-tight", t),
-    ...r
-  }
-));
-n.displayName = "AlertTitle";
-const c = e.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e.createElement(
-  N,
-  {
-    variant: "body4",
-    ref: a,
-    className: s("text-sm [&_p]:leading-relaxed", t)
-  },
-  r.children
-));
-c.displayName = "AlertDescription";
-const A = (t) => {
-  switch (t) {
-    case "success":
-      return "https://frontend-static-files.geoiq.io/strapi/icons_v5_cbb854431a.svg";
-    case "warning":
-      return "https://frontend-static-files.geoiq.io/strapi/icons_v5_1_ba9b25fd5c.svg";
-    case "error":
-      return "https://frontend-static-files.geoiq.io/strapi/Frame_427320353_64f8f337a6.svg";
-    case "info":
-      return "https://frontend-static-files.geoiq.io/strapi/icons_v5_139132dbe2.svg";
-    default:
-      return "https://frontend-static-files.geoiq.io/strapi/icons_v5_139132dbe2.svg";
-  }
-}, x = e.forwardRef(
-  ({
-    className: t,
-    variant: r,
-    description: a,
-    shortContent: i,
-    title: l,
-    id: o,
-    showButton: m,
-    buttonLabel: f,
-    onButtonClick: p,
-    ...d
-  }, g) => /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      id: o,
-      ref: g,
-      role: "alert",
-      ...d,
-      className: s(v({ variant: r, shortContent: i }), t)
-    },
-    /* @__PURE__ */ e.createElement("div", { className: "flex h-full w-[20px] flex-shrink-0 flex-col items-start py-0" }, /* @__PURE__ */ e.createElement("img", { src: A(r), className: "w-5 h-5", alt: "Alert Icon" })),
-    /* @__PURE__ */ e.createElement("div", { className: s(h({ shortContent: i })) }, l && /* @__PURE__ */ e.createElement(n, null, l), /* @__PURE__ */ e.createElement(c, { className: "flex items-center text-light-3" }, a), m && /* @__PURE__ */ e.createElement(
-      _,
+import { TooltipProvider as i, TooltipWrapper as n, TooltipTrigger as a, TooltipContent as m } from "./index.es17.js";
+import * as t from "react";
+function c({
+  headerText: o,
+  content: r,
+  className: l,
+  // id,
+  ...e
+}) {
+  return (
+    // <div id={id}>
+    /* @__PURE__ */ t.createElement(i, null, /* @__PURE__ */ t.createElement(n, { ...e }, /* @__PURE__ */ t.createElement(a, null, e?.triggerElement), /* @__PURE__ */ t.createElement(
+      m,
       {
-        variant: "secondary",
-        size: "sm",
-        onClick: p,
-        className: s(u({ shortContent: i }))
-      },
-      f
-    ))
-  )
-);
-x.displayName = "Alert";
+        side: e?.side ?? "top",
+        headerText: o ?? "",
+        content: r ?? "",
+        className: l,
+        ...e
+      }
+    )))
+  );
+}
 export {
-  x as Alert,
-  v as AlertVariants
+  c as default
 };
 //# sourceMappingURL=index.es18.js.map

package/dist/index.es18.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es18.js","sources":["../src/components/molecules/alert/alert.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '@/lib/utils'\nimport {\n  AlertVariants,\n  AlertButtonVariants,\n  AlertContentVariants,\n} from './alert.styles'\nimport { AlertProps } from './alert.types'\nimport { Button } from '@/components/atoms/button'\nimport { Typography } from '@/components/atoms/typography'\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn('mb-1 font-medium leading-none tracking-tight', className)}\n    {...props}\n  />\n))\nAlertTitle.displayName = 'AlertTitle'\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <Typography\n    variant={'body4'}\n    ref={ref}\n    className={cn('text-sm [&_p]:leading-relaxed', className)}\n  >\n    {props.children}\n  </Typography>\n))\nAlertDescription.displayName = 'AlertDescription'\n\nconst getImage = (variant: string | null | undefined) => {\n  switch (variant) {\n    case 'success':\n      return 'https://frontend-static-files.geoiq.io/strapi/icons_v5_cbb854431a.svg'\n    case 'warning':\n      return 'https://frontend-static-files.geoiq.io/strapi/icons_v5_1_ba9b25fd5c.svg'\n    case 'error':\n      return 'https://frontend-static-files.geoiq.io/strapi/Frame_427320353_64f8f337a6.svg'\n    case 'info':\n      return 'https://frontend-static-files.geoiq.io/strapi/icons_v5_139132dbe2.svg'\n    default:\n      return 'https://frontend-static-files.geoiq.io/strapi/icons_v5_139132dbe2.svg'\n  }\n}\n\n// Main Alert Component\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      className,\n      variant,\n      description,\n      shortContent,\n      title,\n      id,\n      showButton,\n      buttonLabel,\n      onButtonClick,\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      id={id}\n      ref={ref}\n      role=\"alert\"\n      {...props} // ✅ Spreading remaining props but no unknown props like `showButton`\n      className={cn(AlertVariants({ variant, shortContent }), className)}\n    >\n      <div className=\"flex h-full w-[20px] flex-shrink-0 flex-col items-start py-0\">\n        <img src={getImage(variant)} className=\"w-5 h-5\" alt=\"Alert Icon\" />\n      </div>\n      <div className={cn(AlertContentVariants({ shortContent }))}>\n        {title && <AlertTitle>{title}</AlertTitle>}\n        <AlertDescription className=\"flex items-center text-light-3\">\n          {description}\n        </AlertDescription>\n\n        {/* Render Button Conditionally */}\n        {showButton && (\n          <Button\n            variant={'secondary'}\n            size={'sm'}\n            onClick={onButtonClick}\n            className={cn(AlertButtonVariants({ shortContent }))}\n          >\n            {buttonLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n)\n\nAlert.displayName = 'Alert'\n\nexport { Alert, AlertVariants }\n"],"names":["AlertTitle","React","className","props","ref","cn","AlertDescription","Typography","getImage","variant","Alert","description","shortContent","title","id","showButton","buttonLabel","onButtonClick","AlertVariants","AlertContentVariants","Button","AlertButtonVariants"],"mappings":";;;;;AAYA,MAAMA,IAAaC,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAH,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAG;AAAA,IACA,WAAWC,EAAG,gDAAgDH,CAAS;AAAA,IACtE,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAW,cAAc;AAEzB,MAAMM,IAAmBL,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAH,EAAA;AAAA,EAACM;AAAA,EAAA;AAAA,IACC,SAAS;AAAA,IACT,KAAAH;AAAA,IACA,WAAWC,EAAG,iCAAiCH,CAAS;AAAA,EAAA;AAAA,EAEvDC,EAAM;AACT,CACD;AACDG,EAAiB,cAAc;AAE/B,MAAME,IAAW,CAACC,MAAuC;AACvD,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EAAA;AAEb,GAGMC,IAAQT,EAAM;AAAA,EAClB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAO;AAAA,IACA,aAAAE;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGd;AAAA,EAAA,GAELC,MAEA,gBAAAH,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAa;AAAA,MACA,KAAAV;AAAA,MACA,MAAK;AAAA,MACJ,GAAGD;AAAA,MACJ,WAAWE,EAAGa,EAAc,EAAE,SAAAT,GAAS,cAAAG,EAAA,CAAc,GAAGV,CAAS;AAAA,IAAA;AAAA,IAEjE,gBAAAD,EAAA,cAAC,OAAA,EAAI,WAAU,+DAAA,mCACZ,OAAA,EAAI,KAAKO,EAASC,CAAO,GAAG,WAAU,WAAU,KAAI,cAAa,CACpE;AAAA,IACA,gBAAAR,EAAA,cAAC,SAAI,WAAWI,EAAGc,EAAqB,EAAE,cAAAP,EAAA,CAAc,CAAC,EAAA,GACtDC,KAAS,gBAAAZ,EAAA,cAACD,GAAA,MAAYa,CAAM,GAC7B,gBAAAZ,EAAA,cAACK,KAAiB,WAAU,iCAAA,GACzBK,CACH,GAGCI,KACC,gBAAAd,EAAA;AAAA,MAACmB;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SAASH;AAAA,QACT,WAAWZ,EAAGgB,EAAoB,EAAE,cAAAT,EAAA,CAAc,CAAC;AAAA,MAAA;AAAA,MAElDI;AAAA,IAAA,CAGP;AAAA,EAAA;AAGN;AAEAN,EAAM,cAAc;"}
+{"version":3,"file":"index.es18.js","sources":["../src/components/atoms/tooltip/tooltip.tsx"],"sourcesContent":["import {\n  TooltipWrapper,\n  TooltipContent,\n  TooltipTrigger,\n  TooltipProvider,\n} from './tooltip-components'\nimport * as React from 'react'\nimport { TooltipProps } from './tooltip.types'\n\nexport default function Tooltip({\n  headerText,\n  content,\n  className,\n  // id,\n  ...props\n}: TooltipProps) {\n  return (\n    // <div id={id}>\n    <TooltipProvider>\n      <TooltipWrapper {...props}>\n        <TooltipTrigger>{props?.triggerElement}</TooltipTrigger>\n        <TooltipContent\n          side={props?.side ?? 'top'}\n          headerText={headerText ?? ''}\n          content={content ?? ''}\n          className={className}\n          {...props}\n        />\n      </TooltipWrapper>\n    </TooltipProvider>\n    // </div>\n  )\n}\n"],"names":["Tooltip","headerText","content","className","props","React","TooltipProvider","TooltipWrapper","TooltipTrigger","TooltipContent"],"mappings":";;AASA,SAAwBA,EAAQ;AAAA,EAC9B,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA;AAAA,EAEA,GAAGC;AACL,GAAiB;AACf;AAAA;AAAA,IAEE,gBAAAC,EAAA,cAACC,GAAA,MACC,gBAAAD,EAAA,cAACE,GAAA,EAAgB,GAAGH,KAClB,gBAAAC,EAAA,cAACG,GAAA,MAAgBJ,GAAO,cAAe,GACvC,gBAAAC,EAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,MAAML,GAAO,QAAQ;AAAA,QACrB,YAAYH,KAAc;AAAA,QAC1B,SAASC,KAAW;AAAA,QACpB,WAAAC;AAAA,QACC,GAAGC;AAAA,MAAA;AAAA,IAAA,CAER,CACF;AAAA;AAGJ;"}

package/dist/index.es180.js

@@ -0,0 +1,29 @@
+import e from "react";
+function t({ children: r }) {
+  return /* @__PURE__ */ e.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.6,
+      strokeLinecap: "round"
+    },
+    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" }))
+};
+export {
+  l as ShapeIcons
+};
+//# sourceMappingURL=index.es180.js.map

package/dist/index.es180.js.map

@@ -0,0 +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;"}

package/dist/index.es181.js

@@ -0,0 +1,27 @@
+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(
+    "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"
+    }
+  ), /* @__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(
+    "button",
+    {
+      key: e,
+      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 }
+    }
+  ))));
+}
+export {
+  m as ColorPicker
+};
+//# sourceMappingURL=index.es181.js.map

package/dist/index.es181.js.map

@@ -0,0 +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;"}

package/dist/index.es182.js

@@ -0,0 +1,9 @@
+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");
+};
+export {
+  m as convertEpochTime
+};
+//# sourceMappingURL=index.es182.js.map

package/dist/index.es182.js.map

@@ -0,0 +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;"}

package/dist/index.es19.js

@@ -1,53 +1,23 @@
-import { Breadcrumb as b, BreadcrumbList as h, BreadcrumbSeparator as o, BreadcrumbItem as s, BreadcrumbEllipsis as y, BreadcrumbLink as i } from "./index.es90.js";
-import { DropdownMenu as d, DropdownMenuTrigger as f, DropdownMenuContent as B, DropdownMenuItem as w } from "./index.es91.js";
-import e from "react";
-import { Typography as N } from "./index.es17.js";
-import { cn as D } from "./index.es81.js";
-import { CrumbVariants as k } from "./index.es92.js";
-function u({ field: t, isSelected: r }) {
-  return /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement(
-    i,
+import * as o from "react";
+import { cn as n } from "./index.es89.js";
+import { TypographyVariants as y } from "./index.es85.js";
+import { variantElementMap as i, defaultTypographyVariant as c } from "./index.es121.js";
+const f = o.forwardRef(({ className: t, variant: r = c, id: e, ...a }, p) => {
+  const m = i[r];
+  return /* @__PURE__ */ o.createElement(
+    m,
     {
-      href: t?.href,
-      className: D(
-        k({ isSelected: r, type: t?.icon ? "icon" : "text" })
-      )
+      className: n(y({ variant: r, className: t })),
+      ref: p,
+      id: e,
+      ...a
     },
-    t?.name ? /* @__PURE__ */ e.createElement(N, { variant: r ? "body3" : "body4" }, t?.name) : t?.icon
-  ));
-}
-function L({
-  fields: t,
-  numberOfFieldsToShow: r,
-  selectedFieldId: m,
-  breadcrumbEllipsisClassName: p,
-  id: E
-}) {
-  if (t.length <= 1) return null;
-  const l = t[0], g = t.slice(-r), c = t.slice(1, -r);
-  return /* @__PURE__ */ e.createElement(b, { id: E }, /* @__PURE__ */ e.createElement(h, null, /* @__PURE__ */ e.createElement(
-    u,
-    {
-      field: l,
-      isSelected: l.id === m
-    }
-  ), c.length ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(o, null), /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(f, { className: "flex items-center gap-1" }, /* @__PURE__ */ e.createElement(y, { className: "w-4 h-4 text-gray-600" }), /* @__PURE__ */ e.createElement("span", { className: "sr-only" }, "Toggle menu")), /* @__PURE__ */ e.createElement(
-    B,
-    {
-      align: "start",
-      className: `${p} bg-white`
-    },
-    c.map((n, a) => /* @__PURE__ */ e.createElement(
-      w,
-      {
-        key: a,
-        className: "hover:bg-light-3"
-      },
-      /* @__PURE__ */ e.createElement(i, { href: n.href, key: a }, n.name)
-    ))
-  )))) : null, g.map((n, a) => /* @__PURE__ */ e.createElement(e.Fragment, { key: a }, /* @__PURE__ */ e.createElement(o, null), /* @__PURE__ */ e.createElement(u, { field: n, isSelected: n.id === m })))));
-}
+    a.children
+  );
+});
+f.displayName = "Typography";
 export {
-  L as BreadcrumbDemo
+  f as Typography,
+  y as TypographyVariants
 };
 //# sourceMappingURL=index.es19.js.map

package/dist/index.es19.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es19.js","sources":["../src/components/molecules/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  // BreadcrumbPage,\n  BreadcrumbSeparator,\n} from './breadcrumb-components'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu/dropdown-menu-components'\nimport { BreadcrumbProps } from './breadcrumb.types'\nimport React from 'react'\nimport { Typography } from '@/components/atoms/typography'\nimport { Field } from './breadcrumb.types'\nimport { cn } from '@/lib/utils'\nimport { CrumbVariants } from './breadcrumb.styles'\n\nfunction Crumb({ field, isSelected }: { field: Field; isSelected: boolean }) {\n  return (\n    <BreadcrumbItem>\n      <BreadcrumbLink\n        href={field?.href}\n        className={cn(\n          CrumbVariants({ isSelected, type: field?.icon ? 'icon' : 'text' })\n        )}\n      >\n        {field?.name ? (\n          <Typography variant={isSelected ? 'body3' : 'body4'}>\n            {field?.name}\n          </Typography>\n        ) : (\n          field?.icon\n        )}\n      </BreadcrumbLink>\n    </BreadcrumbItem>\n  )\n}\n\nexport function BreadcrumbDemo({\n  fields,\n  numberOfFieldsToShow,\n  selectedFieldId,\n  breadcrumbEllipsisClassName,\n  id,\n}: BreadcrumbProps) {\n  //\n\n  if (fields.length <= 1) return null\n\n  const firstField = fields[0]\n  //\n  const fieldsToShow = fields.slice(-numberOfFieldsToShow)\n  const middleFields = fields.slice(1, -numberOfFieldsToShow)\n\n  return (\n    <Breadcrumb id={id}>\n      <BreadcrumbList>\n        {/* <BreadcrumbItem>\n          <BreadcrumbLink\n            href={fields[0]?.href ?? '/'}\n            className=\"text-gray-600 \"\n          >\n            {fields[0]?.name ? (\n              <Typography variant=\"body3\">{fields[0]?.name}</Typography>\n            ) : (\n              fields[0]?.icon\n            )}\n          </BreadcrumbLink>\n        </BreadcrumbItem> */}\n        <Crumb\n          field={firstField}\n          isSelected={firstField.id === selectedFieldId}\n        />\n        {middleFields.length ? (\n          <>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger className=\"flex items-center gap-1\">\n                  <BreadcrumbEllipsis className=\"w-4 h-4 text-gray-600\" />\n                  <span className=\"sr-only\">Toggle menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className={`${breadcrumbEllipsisClassName} bg-white`}\n                >\n                  {middleFields.map((field, index) => (\n                    <DropdownMenuItem\n                      key={index}\n                      className={`hover:bg-light-3`}\n                    >\n                      <BreadcrumbLink href={field.href} key={index}>\n                        {field.name}\n                      </BreadcrumbLink>\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </BreadcrumbItem>\n          </>\n        ) : null}\n\n        {fieldsToShow.map((field, index) => (\n          <React.Fragment key={index}>\n            <BreadcrumbSeparator />\n            <Crumb field={field} isSelected={field.id === selectedFieldId} />\n          </React.Fragment>\n        ))}\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n"],"names":["Crumb","field","isSelected","BreadcrumbItem","React","BreadcrumbLink","cn","CrumbVariants","Typography","BreadcrumbDemo","fields","numberOfFieldsToShow","selectedFieldId","breadcrumbEllipsisClassName","id","firstField","fieldsToShow","middleFields","Breadcrumb","BreadcrumbList","BreadcrumbSeparator","DropdownMenu","DropdownMenuTrigger","BreadcrumbEllipsis","DropdownMenuContent","index","DropdownMenuItem"],"mappings":";;;;;;AAsBA,SAASA,EAAM,EAAE,OAAAC,GAAO,YAAAC,KAAqD;AAC3E,yCACGC,GAAA,MACCC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMJ,GAAO;AAAA,MACb,WAAWK;AAAA,QACTC,EAAc,EAAE,YAAAL,GAAY,MAAMD,GAAO,OAAO,SAAS,QAAQ;AAAA,MAAA;AAAA,IACnE;AAAA,IAECA,GAAO,OACNG,gBAAAA,EAAA,cAACI,GAAA,EAAW,SAASN,IAAa,UAAU,QAAA,GACzCD,GAAO,IACV,IAEAA,GAAO;AAAA,EAAA,CAGb;AAEJ;AAEO,SAASQ,EAAe;AAAA,EAC7B,QAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,6BAAAC;AAAA,EACA,IAAAC;AACF,GAAoB;AAGlB,MAAIJ,EAAO,UAAU,EAAG,QAAO;AAE/B,QAAMK,IAAaL,EAAO,CAAC,GAErBM,IAAeN,EAAO,MAAM,CAACC,CAAoB,GACjDM,IAAeP,EAAO,MAAM,GAAG,CAACC,CAAoB;AAE1D,SACEP,gBAAAA,EAAA,cAACc,GAAA,EAAW,IAAAJ,EAAA,GACVV,gBAAAA,EAAA,cAACe,GAAA,MAaCf,gBAAAA,EAAA;AAAA,IAACJ;AAAA,IAAA;AAAA,MACC,OAAOe;AAAA,MACP,YAAYA,EAAW,OAAOH;AAAA,IAAA;AAAA,EAAA,GAE/BK,EAAa,SACZb,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MACEA,gBAAAA,EAAA,cAACgB,GAAA,IAAoB,GACrBhB,gBAAAA,EAAA,cAACD,GAAA,MACCC,gBAAAA,EAAA,cAACiB,GAAA,MACCjB,gBAAAA,EAAA,cAACkB,GAAA,EAAoB,WAAU,0BAAA,GAC7BlB,gBAAAA,EAAA,cAACmB,GAAA,EAAmB,WAAU,wBAAA,CAAwB,GACtDnB,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,UAAA,GAAU,aAAW,CACvC,GACAA,gBAAAA,EAAA;AAAA,IAACoB;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAW,GAAGX,CAA2B;AAAA,IAAA;AAAA,IAExCI,EAAa,IAAI,CAAChB,GAAOwB,MACxBrB,gBAAAA,EAAA;AAAA,MAACsB;AAAA,MAAA;AAAA,QACC,KAAKD;AAAA,QACL,WAAW;AAAA,MAAA;AAAA,MAEXrB,gBAAAA,EAAA,cAACC,KAAe,MAAMJ,EAAM,MAAM,KAAKwB,KACpCxB,EAAM,IACT;AAAA,IAAA,CAEH;AAAA,EAAA,CAEL,CACF,CACF,IACE,MAEHe,EAAa,IAAI,CAACf,GAAOwB,MACxBrB,gBAAAA,EAAA,cAACA,EAAM,UAAN,EAAe,KAAKqB,EAAA,GACnBrB,gBAAAA,EAAA,cAACgB,GAAA,IAAoB,GACrBhB,gBAAAA,EAAA,cAACJ,GAAA,EAAM,OAAAC,GAAc,YAAYA,EAAM,OAAOW,EAAA,CAAiB,CACjE,CACD,CACH,CACF;AAEJ;"}
+{"version":3,"file":"index.es19.js","sources":["../src/components/atoms/typography/typography.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { TypographyVariants } from './typography.styles'\nimport { TypographyProps } from './typography.types'\nimport {\n  defaultTypographyVariant,\n  variantElementMap,\n} from './typography.config'\n\nconst Typography = React.forwardRef<\n  HTMLHeadingElement | HTMLParagraphElement,\n  TypographyProps\n>(({ className, variant = defaultTypographyVariant, id, ...props }, ref) => {\n  const Comp: React.ElementType = variantElementMap[\n    variant as keyof typeof variantElementMap\n  ] as React.ElementType\n\n  return (\n    <Comp\n      className={cn(TypographyVariants({ variant, className }))}\n      ref={ref}\n      id={id}\n      {...props}\n    >\n      {props.children}\n    </Comp>\n  )\n})\n\nTypography.displayName = 'Typography'\n\nexport { Typography, TypographyVariants }\n"],"names":["Typography","React","className","variant","defaultTypographyVariant","id","props","ref","Comp","variantElementMap","cn","TypographyVariants"],"mappings":";;;;AASA,MAAMA,IAAaC,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,SAAAC,IAAUC,GAA0B,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAQ;AAC1E,QAAMC,IAA0BC,EAC9BN,CACF;AAEA,SACE,gBAAAF,EAAA;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,WAAWE,EAAGC,EAAmB,EAAE,SAAAR,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,MACxD,KAAAK;AAAA,MACA,IAAAF;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,IAEHA,EAAM;AAAA,EAAA;AAGb,CAAC;AAEDN,EAAW,cAAc;"}

package/dist/index.es2.js

@@ -1,27 +1,125 @@
-import { Accordion as m, AccordionItem as a, AccordionTrigger as d, AccordionContent as u } from "./index.es3.js";
-import e from "react";
-function A({
-  trigger: t,
-  content: o,
-  triggerProps: r,
-  contentProps: c,
-  rootProps: n,
-  itemProps: l,
-  id: i
-}) {
-  return /* @__PURE__ */ e.createElement(
-    m,
+import t, { useState as h, useEffect as C } from "react";
+import { _Dialog as R } from "./index.es41.js";
+import { Typography as f } from "./index.es19.js";
+import { Button as p } from "./index.es9.js";
+import { Input as w } from "./index.es11.js";
+const j = ["5", "10", "20", "50", ">50"], T = ({
+  open: o,
+  onClose: _,
+  onRequestCredits: g,
+  onProceedToPayment: E,
+  dialogClassName: k,
+  buyCreditsOptions: N = j,
+  minimumCreditsToBuy: v = 5,
+  requestOnly: D = !1
+}) => {
+  const [a, l] = h(""), [r, c] = h(""), [m, i] = h(""), x = N.filter((e) => !e.startsWith(">")).map((e) => Number(e)), O = x.length ? Math.max(...x) : 50, b = a.startsWith(">") || Number(a) > O, s = D || b, u = a && !s && Number(a) < v ? `Minimum number of credits is ${v}` : "";
+  C(() => {
+    if (s) {
+      const e = P(r);
+      i(e);
+    } else
+      i("");
+  }, [r, s]);
+  const P = (e) => {
+    if (!e) return "";
+    const n = e.startsWith("+91") ? e.substring(3) : e;
+    return /^[6-9]\d{9}$/.test(n) ? "" : "Number should start with 6-9 and be 10 digits";
+  }, W = (e) => {
+    const n = e.target.value.replace(/\D/g, "");
+    c(n);
+  }, q = (e) => {
+    const n = e.target.value.replace(/\D/g, "");
+    l(n);
+  }, S = () => {
+    const e = a.startsWith(">") ? a.replace(">", "") + "+" : a;
+    s ? g(e, r) : E ? E(e, r) : g(e, r), d();
+  }, d = () => {
+    _(), setTimeout(() => {
+      c(""), i(""), l("");
+    }, 100);
+  };
+  C(() => {
+    o || setTimeout(() => {
+      c(""), i(""), l("");
+    }, 100);
+  }, [o]);
+  const $ = s ? `Request ${a}` : `Proceed to Payment ${a} `, M = !a || Number(a) <= 0 || !!u || s && (!!m || !r), y = (e) => e.startsWith(">") ? b : e === a;
+  return /* @__PURE__ */ t.createElement(
+    R,
     {
-      type: "single",
-      collapsible: !0,
-      className: "w-full",
-      ...n,
-      id: i
-    },
-    /* @__PURE__ */ e.createElement(a, { value: "item-1", ...l }, /* @__PURE__ */ e.createElement(d, { ...r }, t), /* @__PURE__ */ e.createElement(u, { ...c }, o))
+      open: o,
+      onOpenChange: d,
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      trigger: null,
+      contentClassName: "w-min",
+      body: /* @__PURE__ */ t.createElement("div", { className: "w-72 md:w-[570px] flex items-center " }, /* @__PURE__ */ t.createElement("div", { className: "items-center justify-center" }, /* @__PURE__ */ t.createElement(
+        "img",
+        {
+          src: "https://frontend-static-files.geoiq.io/strapi/Group_427319313_e054593ef1/Group_427319313_e054593ef1.svg",
+          alt: "lock",
+          className: k
+        }
+      )), /* @__PURE__ */ t.createElement("div", { className: "px-4 py-2 w-72 md:w-[400px]" }, /* @__PURE__ */ t.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ t.createElement(f, { variant: "h3", className: "text-light-2" }, "How many credits do you need?"), /* @__PURE__ */ t.createElement(f, { variant: "body4", className: "text-light-4" }, /* @__PURE__ */ t.createElement("span", { className: "underline" }, "Note:"), " One credit is needed to unlock a site report.", " ", s ? " Please provide your phone number to make a request" : "")), /* @__PURE__ */ t.createElement("div", { className: "mt-3" }, /* @__PURE__ */ t.createElement(
+        w,
+        {
+          id: "creditValue",
+          type: "text",
+          value: a.startsWith(">") ? "" : a,
+          onChange: q,
+          className: "h-10",
+          placeholder: "Enter number of credits",
+          maxLength: 6,
+          isError: !!u,
+          message: u
+        }
+      )), /* @__PURE__ */ t.createElement("div", { className: "flex flex-row gap-2 mt-3" }, N.map((e) => /* @__PURE__ */ t.createElement(
+        p,
+        {
+          variant: y(e) ? "primary" : "secondary",
+          key: e,
+          className: y(e) ? "w-10" : "w-10 bg-light-2",
+          size: "sm",
+          onClick: () => l(e)
+        },
+        e
+      ))), s && /* @__PURE__ */ t.createElement("div", { className: "flex flex-col mt-4" }, /* @__PURE__ */ t.createElement(f, { className: "mb-1 text-sm font-medium text-light-2" }, "Phone Number *"), /* @__PURE__ */ t.createElement(
+        w,
+        {
+          id: "phoneNumber",
+          type: "text",
+          value: r,
+          onChange: W,
+          className: "h-10",
+          placeholder: "Enter phone number",
+          maxLength: 10,
+          isError: !!m,
+          message: m
+        }
+      )))),
+      footer: /* @__PURE__ */ t.createElement("div", { className: "flex w-full gap-2 justify-evenly" }, /* @__PURE__ */ t.createElement(p, { variant: "secondary", onClick: d, title: "Cancel" }), /* @__PURE__ */ t.createElement(
+        p,
+        {
+          variant: "primary",
+          suffixIcon: /* @__PURE__ */ t.createElement(
+            "img",
+            {
+              src: "https://frontend-static-files.geoiq.io/strapi/navbar_credits_247858e26a.svg",
+              width: 16,
+              height: 16,
+              alt: "coin icon",
+              className: "ml-1 mr-2 md:mr-0"
+            }
+          ),
+          title: $,
+          onClick: S,
+          disabled: M
+        }
+      ))
+    }
   );
-}
+};
 export {
-  A as AccordionDemo
+  T as RequestCreditsDialog
 };
 //# sourceMappingURL=index.es2.js.map