geoiq-frontend-ui-kit 2.0.1 → 2.0.3

package/dist/{index.es140.js.map → index177.es.js.map}

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

package/dist/{index.es141.js → index178.es.js}

@@ -1,12 +1,13 @@
-import { Typography as g } from "./index.es17.js";
-import { Spinner as $ } from "./index.es57.js";
-import { SingleCombobox as x } from "./index.es25.js";
-import { Upload as R, Pen as S, X as T } from "lucide-react";
-import e, { useState as _, useRef as C } from "react";
-import { useFormValues as M } from "./index.es130.js";
-import { useToast as P } from "./index.es79.js";
-const X = ({
-  id: b,
+import { Typography as g } from "./index19.es.js";
+import e, { useState as $, useRef as x } from "react";
+import "./index35.es.js";
+import { useToast as T } from "./index87.es.js";
+import { Spinner as R } from "./index64.es.js";
+import { SingleCombobox as S } from "./index27.es.js";
+import { Upload as _, Pen as C, X as M } from "lucide-react";
+import { useFormValues as P } from "./index141.es.js";
+const q = ({
+  id: h,
   onChange: c,
   value: l = [],
   accept: y = "image/*",
@@ -14,7 +15,7 @@ const X = ({
   maxImages: a = 20,
   options: E
 }) => {
-  const { onAssetUpload: u, onToggleImageEditor: f } = M(), { toast: o } = P(), [i, h] = _(!1), m = C(null), N = async (s) => {
+  const { onAssetUpload: u, onToggleImageEditor: f } = P(), { toast: o } = T(), [i, b] = $(!1), m = x(null), N = async (s) => {
     const t = s.target.files;
     if (!(!t?.length || i)) {
       if (l.length + t.length > a) {
@@ -26,7 +27,7 @@ const X = ({
         return;
       }
       if (u) {
-        h(!0);
+        b(!0);
         try {
           const r = Array.from(t).map((d) => u(d)), A = (await Promise.all(r)).map((d) => ({ ...d, tag: "" }));
           c([...l, ...A]), o({
@@ -41,7 +42,7 @@ const X = ({
             icon: "warning"
           });
         } finally {
-          h(!1), m.current && (m.current.value = "");
+          b(!1), m.current && (m.current.value = "");
         }
       }
     }
@@ -60,7 +61,7 @@ const X = ({
     const r = [...l], n = r[t];
     r.splice(t, 1, { ...n, ...s }), c(r);
   };
-  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, i && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement($, { className: "w-8 h-8 text-primary-1" })), /* @__PURE__ */ e.createElement("div", { className: "relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1" }, /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, i && /* @__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",
@@ -68,12 +69,12 @@ const X = ({
       type: "button",
       disabled: i || l.length >= a
     },
-    /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ e.createElement("div", { className: "bg-gray-100 rounded-full" }, /* @__PURE__ */ e.createElement(R, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-600" }, i ? "Uploading..." : l.length >= a ? `Maximum ${a} images reached` : "Add Images"), l.length > 0 && /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-500" }, l.length, " of ", a, " images"))
+    /* @__PURE__ */ e.createElement("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(g, { variant: "body1", className: "text-gray-600" }, i ? "Uploading..." : l.length >= a ? `Maximum ${a} images reached` : "Add Images"), l.length > 0 && /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-500" }, l.length, " of ", a, " images"))
   ), /* @__PURE__ */ e.createElement(
     "input",
     {
       ref: m,
-      id: `${b}-gallery`,
+      id: `${h}-gallery`,
       type: "file",
       accept: y,
       disabled: i || l.length >= a,
@@ -91,8 +92,9 @@ const X = ({
   ), f && /* @__PURE__ */ e.createElement(
     "button",
     {
-      onClick: () => {
-        f({
+      type: "button",
+      onClick: (r) => {
+        r.currentTarget.blur(), f({
           imageUrl: s.public_url,
           index: t,
           onReplaceImage: v
@@ -100,7 +102,7 @@ const X = ({
       },
       className: "absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100"
     },
-    /* @__PURE__ */ e.createElement(S, { size: 16, className: "stroke-danger" })
+    /* @__PURE__ */ e.createElement(C, { size: 16, className: "stroke-danger" })
   ), /* @__PURE__ */ e.createElement(
     "button",
     {
@@ -109,9 +111,9 @@ const X = ({
       type: "button",
       disabled: i
     },
-    /* @__PURE__ */ e.createElement(T, { size: 16, className: "stroke-danger" })
+    /* @__PURE__ */ e.createElement(M, { size: 16, className: "stroke-danger" })
   )), /* @__PURE__ */ e.createElement(
-    x,
+    S,
     {
       options: E.map((r) => ({
         id: r,
@@ -127,6 +129,6 @@ const X = ({
   )))));
 };
 export {
-  X as TaggableMultiImagePicker
+  q as TaggableMultiImagePicker
 };
-//# sourceMappingURL=index.es141.js.map
+//# sourceMappingURL=index178.es.js.map

package/dist/index178.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index178.es.js","sources":["../src/components/ui/form-renderer/components/form-fields/components/taggable-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 { SingleCombobox } from '@/components/molecules/single-combobox'\n\nimport { Upload, X, Pen } from 'lucide-react'\nimport React, { useRef, useState } from 'react'\nimport { useFormValues } from '../../../../context/form-values'\nimport { AssetValue, TaggableAssetValue } from '../../../../form.types'\n\ninterface TaggableMultiImagePickerProps {\n  id: string\n  onChange: (data: TaggableAssetValue[]) => void\n  value?: TaggableAssetValue[]\n  accept?: string\n  error?: string\n  maxImages?: number\n  options: string[]\n}\n\nconst TaggableMultiImagePicker: React.FC<TaggableMultiImagePickerProps> = ({\n  id,\n  onChange,\n  value = [],\n  accept = 'image/*',\n  error,\n  maxImages = 20,\n  options,\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\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              <SingleCombobox\n                options={options.map((option) => ({\n                  id: option,\n                  name: option,\n                }))}\n                value={image.tag}\n                onChange={(data) => {\n                  const newImages = [...value]\n                  newImages[index].tag = data\n                  onChange(newImages)\n                }}\n                placeholder={'Select '}\n              />\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { TaggableMultiImagePicker }\n"],"names":["TaggableMultiImagePicker","id","onChange","value","accept","error","maxImages","options","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","SingleCombobox","option"],"mappings":"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"}

package/dist/{index.es142.js → index179.es.js}

@@ -1,27 +1,28 @@
 import * as e from "react";
-import { useState as $, useRef as x } from "react";
-import { Input as R } from "./index.es9.js";
-import { Typography as g } from "./index.es17.js";
-import { Spinner as T } from "./index.es57.js";
-import { Upload as U, Pen as I, X as z } from "lucide-react";
-import { useFormValues as C } from "./index.es130.js";
-import { useToast as M } from "./index.es79.js";
-const q = ({
+import { useState as $, useRef as T } from "react";
+import { Input as x } from "./index11.es.js";
+import { Typography as g } from "./index19.es.js";
+import "./index35.es.js";
+import { useToast as R } from "./index87.es.js";
+import { Spinner as U } from "./index64.es.js";
+import { Upload as I, Pen as z, X as C } from "lucide-react";
+import { useFormValues as M } from "./index141.es.js";
+const W = ({
   id: p,
-  onChange: c,
-  value: l = [],
+  onChange: o,
+  value: r = [],
   accept: E = "image/*",
   error: u,
-  maxImages: r = 20,
+  maxImages: l = 20,
   placeholder: f
 }) => {
-  const { onAssetUpload: h, onToggleImageEditor: y } = C(), { toast: o } = M(), [s, b] = $(!1), m = x(null), N = async (a) => {
+  const { onAssetUpload: h, onToggleImageEditor: y } = M(), { toast: c } = R(), [i, b] = $(!1), m = T(null), N = async (a) => {
     const t = a.target.files;
-    if (!(!t?.length || s)) {
-      if (l.length + t.length > r) {
-        o({
+    if (!(!t?.length || i)) {
+      if (r.length + t.length > l) {
+        c({
           title: "Alert!",
-          description: `Maximum ${r} images allowed.`,
+          description: `Maximum ${l} images allowed.`,
           icon: "warning"
         });
         return;
@@ -29,14 +30,14 @@ const q = ({
       if (h) {
         b(!0);
         try {
-          const i = Array.from(t).map((d) => h(d)), A = (await Promise.all(i)).map((d) => ({ ...d, tag: "" }));
-          c([...l, ...A]), o({
+          const s = Array.from(t).map((d) => h(d)), A = (await Promise.all(s)).map((d) => ({ ...d, tag: "" }));
+          o([...r, ...A]), c({
             title: "Alert!",
             description: `${t.length} ${t.length === 1 ? "image" : "images"} uploaded successfully.`,
             icon: "success"
           });
         } catch {
-          o({
+          c({
             title: "Alert!",
             description: "Error uploading images",
             icon: "warning"
@@ -47,29 +48,29 @@ const q = ({
       }
     }
   }, w = () => {
-    !s && l.length < r ? m.current?.click() : l.length >= r && o({
+    !i && r.length < l ? m.current?.click() : r.length >= l && c({
       title: "Alert!",
-      description: `Maximum ${r} images allowed.`,
+      description: `Maximum ${l} images allowed.`,
       icon: "warning"
     });
   }, v = (a) => {
-    if (!s) {
-      const t = [...l];
-      t.splice(a, 1), c(t);
+    if (!i) {
+      const t = [...r];
+      t.splice(a, 1), o(t);
     }
   }, k = (a, t) => {
-    const i = [...l], n = i[t];
-    i.splice(t, 1, { ...n, ...a }), c(i);
+    const s = [...r], n = s[t];
+    s.splice(t, 1, { ...n, ...a }), o(s);
   };
-  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, s && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement(T, { 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(
+  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, i && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement(U, { 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: s || l.length >= r
+      disabled: i || 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" }, s ? "Uploading..." : l.length >= r ? `Maximum ${r} images reached` : "Add Images"), l.length > 0 && /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-500" }, l.length, " of ", r, " images"))
+    /* @__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(I, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-600" }, i ? "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",
     {
@@ -77,12 +78,12 @@ const q = ({
       id: `${p}-gallery`,
       type: "file",
       accept: E,
-      disabled: s || l.length >= r,
+      disabled: i || r.length >= l,
       onChange: N,
       className: "hidden",
       multiple: !0
     }
-  ), u && /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "mt-1 text-danger-1" }, u)), 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((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(
+  ), 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,
@@ -92,8 +93,9 @@ const q = ({
   ), y && /* @__PURE__ */ e.createElement(
     "button",
     {
-      onClick: () => {
-        y({
+      type: "button",
+      onClick: (s) => {
+        s.currentTarget.blur(), y({
           imageUrl: a.public_url,
           index: t,
           onReplaceImage: k
@@ -101,32 +103,32 @@ const q = ({
       },
       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(z, { 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: s
+      disabled: i
     },
-    /* @__PURE__ */ e.createElement(z, { size: 16, className: "stroke-danger" })
+    /* @__PURE__ */ e.createElement(C, { size: 16, className: "stroke-danger" })
   )), /* @__PURE__ */ e.createElement(
-    R,
+    x,
     {
       id: p + t,
       type: "text",
       placeholder: f || "",
       value: a.tag,
       required: !0,
-      onChange: (i) => {
-        const n = [...l];
-        n[t].tag = i.target.value, c(n);
+      onChange: (s) => {
+        const n = [...r];
+        n[t].tag = s.target.value, o(n);
       }
     }
   )))));
 };
 export {
-  q as TaggableImageUploadFieldWithInput
+  W as TaggableImageUploadFieldWithInput
 };
-//# sourceMappingURL=index.es142.js.map
+//# sourceMappingURL=index179.es.js.map

package/dist/index179.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index179.es.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.es16.js → index18.es.js}

@@ -1,4 +1,4 @@
-import { TooltipProvider as i, TooltipWrapper as n, TooltipTrigger as a, TooltipContent as m } from "./index.es15.js";
+import { TooltipProvider as i, TooltipWrapper as n, TooltipTrigger as a, TooltipContent as m } from "./index17.es.js";
 import * as t from "react";
 function c({
   headerText: o,
@@ -24,4 +24,4 @@ function c({
 export {
   c as default
 };
-//# sourceMappingURL=index.es16.js.map
+//# sourceMappingURL=index18.es.js.map

package/dist/{index.es16.js.map → index18.es.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.es16.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;"}
+{"version":3,"file":"index18.es.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/index180.es.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=index180.es.js.map

package/dist/index180.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index180.es.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/index181.es.js

@@ -0,0 +1,27 @@
+import t from "react";
+import { SWATCHES as l } from "./index148.es.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=index181.es.js.map

package/dist/index181.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index181.es.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.es143.js → index182.es.js}

@@ -6,4 +6,4 @@ const m = (t) => {
 export {
   m as convertEpochTime
 };
-//# sourceMappingURL=index.es143.js.map
+//# sourceMappingURL=index182.es.js.map

package/dist/{index.es143.js.map → index182.es.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.es143.js","sources":["../src/components/organisms/navbar/components/notification-panel/components/notification-card/notification.utils.ts"],"sourcesContent":["import { format } from 'date-fns'\n\nconst convertEpochTime = (epochTime: number) => {\n  const date = new Date(epochTime * 1000)\n  return format(date, 'dd MMM yyyy, hh:mm a')\n}\n\nexport { convertEpochTime }\n"],"names":["convertEpochTime","epochTime","date","format"],"mappings":";AAEA,MAAMA,IAAmB,CAACC,MAAsB;AAC9C,QAAMC,IAAO,IAAI,KAAKD,IAAY,GAAI;AACtC,SAAOE,EAAOD,GAAM,sBAAsB;AAC5C;"}
+{"version":3,"file":"index182.es.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.es17.js → index19.es.js}

@@ -1,7 +1,7 @@
 import * as o from "react";
-import { cn as n } from "./index.es81.js";
-import { TypographyVariants as y } from "./index.es77.js";
-import { variantElementMap as i, defaultTypographyVariant as c } from "./index.es108.js";
+import { cn as n } from "./index89.es.js";
+import { TypographyVariants as y } from "./index85.es.js";
+import { variantElementMap as i, defaultTypographyVariant as c } from "./index99.es.js";
 const f = o.forwardRef(({ className: t, variant: r = c, id: e, ...a }, p) => {
   const m = i[r];
   return /* @__PURE__ */ o.createElement(
@@ -20,4 +20,4 @@ export {
   f as Typography,
   y as TypographyVariants
 };
-//# sourceMappingURL=index.es17.js.map
+//# sourceMappingURL=index19.es.js.map

package/dist/{index.es17.js.map → index19.es.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.es17.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;"}
+{"version":3,"file":"index19.es.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;"}