geoiq-frontend-ui-kit 2.0.0 → 2.0.2

package/dist/index.es2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es2.js","sources":["../src/components/atoms/accordion/accordion.tsx"],"sourcesContent":["import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from './accordion-components'\nimport React from 'react'\n\nimport { AccordionProps } from './accordion.types'\n\nexport function AccordionDemo({\n  trigger,\n  content,\n  triggerProps,\n  contentProps,\n  rootProps,\n  itemProps,\n  id,\n}: AccordionProps) {\n  return (\n    <Accordion\n      type=\"single\"\n      collapsible\n      className=\"w-full\"\n      {...rootProps}\n      id={id}\n    >\n      <AccordionItem value=\"item-1\" {...itemProps}>\n        <AccordionTrigger {...triggerProps}>{trigger}</AccordionTrigger>\n        <AccordionContent {...contentProps}>{content}</AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  )\n}\n"],"names":["AccordionDemo","trigger","content","triggerProps","contentProps","rootProps","itemProps","id","React","Accordion","AccordionItem","AccordionTrigger","AccordionContent"],"mappings":";;AAUO,SAASA,EAAc;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AACF,GAAmB;AACjB,SACEC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAW;AAAA,MACX,WAAU;AAAA,MACT,GAAGJ;AAAA,MACJ,IAAAE;AAAA,IAAA;AAAA,oCAECG,GAAA,EAAc,OAAM,UAAU,GAAGJ,KAChCE,gBAAAA,EAAA,cAACG,GAAA,EAAkB,GAAGR,EAAA,GAAeF,CAAQ,GAC7CO,gBAAAA,EAAA,cAACI,KAAkB,GAAGR,EAAA,GAAeF,CAAQ,CAC/C;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.es2.js","sources":["../src/components/ui/request-credits-view/component/request-credit-dialog.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react'\nimport { Dialog } from '@/components/organisms/dialog'\nimport { Typography } from '@/components/atoms/typography'\nimport { Button } from '@/components/atoms/button'\nimport { Input } from '@/components/atoms/input'\nimport { RequestCreditsDialogProps } from './request-credit-dialog.types'\n\nconst DefaultBuyCreditsOptions = ['5', '10', '20', '50', '>50']\n\nexport const RequestCreditsDialog: React.FC<RequestCreditsDialogProps> = ({\n  open,\n  onClose,\n  onRequestCredits,\n  onProceedToPayment,\n  dialogClassName,\n  buyCreditsOptions = DefaultBuyCreditsOptions,\n  minimumCreditsToBuy = 5,\n  requestOnly = false,\n}) => {\n  const [selectedCredit, setSelectedCredit] = useState('')\n  const [phoneNumber, setPhoneNumber] = useState('')\n  const [phoneError, setPhoneError] = useState('')\n\n  // Largest plain numeric option (e.g. 50). Anything above it is a request.\n  const numericOptions = buyCreditsOptions\n    .filter((option) => !option.startsWith('>'))\n    .map((option) => Number(option))\n  const maxCredit = numericOptions.length ? Math.max(...numericOptions) : 50\n\n  const exceedsMaxCredit =\n    selectedCredit.startsWith('>') || Number(selectedCredit) > maxCredit\n\n  const isRequestAction = requestOnly || exceedsMaxCredit\n\n  const creditError =\n    selectedCredit &&\n    !isRequestAction &&\n    Number(selectedCredit) < minimumCreditsToBuy\n      ? `Minimum number of credits is ${minimumCreditsToBuy}`\n      : ''\n\n  // Validate phone on every change\n  useEffect(() => {\n    if (isRequestAction) {\n      const error = validatePhone(phoneNumber)\n      setPhoneError(error)\n    } else {\n      setPhoneError('')\n    }\n  }, [phoneNumber, isRequestAction])\n\n  const validatePhone = (phone: string) => {\n    if (!phone) return ''\n    const numberOnly = phone.startsWith('+91') ? phone.substring(3) : phone\n    if (!/^[6-9]\\d{9}$/.test(numberOnly))\n      return 'Number should start with 6-9 and be 10 digits'\n    return ''\n  }\n\n  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value.replace(/\\D/g, '') // keep only digits\n    setPhoneNumber(value)\n  }\n\n  const handleCreditChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value.replace(/\\D/g, '') // keep only digits\n    setSelectedCredit(value)\n  }\n\n  const handleSubmit = () => {\n    // Only the '>50' style option appends '+'; a typed value is sent as-is\n    const credit = selectedCredit.startsWith('>')\n      ? selectedCredit.replace('>', '') + '+'\n      : selectedCredit\n    if (isRequestAction) {\n      onRequestCredits(credit, phoneNumber)\n    } else {\n      if (onProceedToPayment) {\n        onProceedToPayment(credit, phoneNumber)\n      } else {\n        onRequestCredits(credit, phoneNumber)\n      }\n    }\n    reset()\n  }\n\n  const reset = () => {\n    onClose()\n    setTimeout(() => {\n      setPhoneNumber('')\n      setPhoneError('')\n      setSelectedCredit('')\n    }, 100)\n  }\n\n  useEffect(() => {\n    if (!open) {\n      setTimeout(() => {\n        setPhoneNumber('')\n        setPhoneError('')\n        setSelectedCredit('')\n      }, 100)\n    }\n  }, [open])\n\n  const buttonText = isRequestAction\n    ? `Request ${selectedCredit}`\n    : `Proceed to Payment ${selectedCredit} `\n\n  // Button should be disabled if no credit entered, or phone is invalid for a request\n  const isButtonDisabled =\n    !selectedCredit ||\n    Number(selectedCredit) <= 0 ||\n    !!creditError ||\n    (isRequestAction && (!!phoneError || !phoneNumber))\n\n  // Highlight the '>50' style option whenever the entered value exceeds the\n  // largest buyable option; plain options match exactly.\n  const isOptionSelected = (credit: string) =>\n    credit.startsWith('>') ? exceedsMaxCredit : credit === selectedCredit\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={reset}\n      onOpenAutoFocus={(e) => e.preventDefault()}\n      trigger={null}\n      contentClassName=\"w-min\"\n      body={\n        <div className=\"w-72 md:w-[570px] flex items-center \">\n          <div className=\"items-center justify-center\">\n            <img\n              src=\"https://frontend-static-files.geoiq.io/strapi/Group_427319313_e054593ef1/Group_427319313_e054593ef1.svg\"\n              alt=\"lock\"\n              className={dialogClassName}\n            />\n          </div>\n          <div className=\"px-4 py-2 w-72 md:w-[400px]\">\n            <div className=\"flex flex-col gap-2\">\n              <Typography variant={'h3'} className=\"text-light-2\">\n                How many credits do you need?\n              </Typography>\n              <Typography variant={'body4'} className=\"text-light-4\">\n                <span className=\"underline\">Note:</span> One credit is needed to\n                unlock a site report.{' '}\n                {isRequestAction\n                  ? ' Please provide your phone number to make a request'\n                  : ''}\n              </Typography>\n            </div>\n\n            <div className=\"mt-3\">\n              <Input\n                id=\"creditValue\"\n                type=\"text\"\n                value={selectedCredit.startsWith('>') ? '' : selectedCredit}\n                onChange={handleCreditChange}\n                className=\"h-10\"\n                placeholder=\"Enter number of credits\"\n                maxLength={6}\n                isError={!!creditError}\n                message={creditError}\n              />\n            </div>\n\n            <div className=\"flex flex-row gap-2 mt-3\">\n              {buyCreditsOptions.map((credit) => (\n                <Button\n                  variant={isOptionSelected(credit) ? 'primary' : 'secondary'}\n                  key={credit}\n                  className={\n                    isOptionSelected(credit) ? 'w-10' : 'w-10 bg-light-2'\n                  }\n                  size={'sm'}\n                  onClick={() => setSelectedCredit(credit)}\n                >\n                  {credit}\n                </Button>\n              ))}\n            </div>\n            {isRequestAction && (\n              <div className=\"flex flex-col mt-4\">\n                <Typography className=\"mb-1 text-sm font-medium text-light-2\">\n                  Phone Number *\n                </Typography>\n                <Input\n                  id=\"phoneNumber\"\n                  type=\"text\" // use text for maxLength\n                  value={phoneNumber}\n                  onChange={handlePhoneChange}\n                  className=\"h-10\"\n                  placeholder=\"Enter phone number\"\n                  maxLength={10}\n                  isError={!!phoneError}\n                  message={phoneError}\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      }\n      footer={\n        <div className=\"flex w-full gap-2 justify-evenly\">\n          <Button variant=\"secondary\" onClick={reset} title={'Cancel'} />\n          <Button\n            variant=\"primary\"\n            suffixIcon={\n              <img\n                src={\n                  'https://frontend-static-files.geoiq.io/strapi/navbar_credits_247858e26a.svg'\n                }\n                width={16}\n                height={16}\n                alt=\"coin icon\"\n                className=\"ml-1 mr-2 md:mr-0\"\n              />\n            }\n            title={buttonText}\n            onClick={handleSubmit}\n            disabled={isButtonDisabled}\n          />\n        </div>\n      }\n    />\n  )\n}\n"],"names":["DefaultBuyCreditsOptions","RequestCreditsDialog","open","onClose","onRequestCredits","onProceedToPayment","dialogClassName","buyCreditsOptions","minimumCreditsToBuy","requestOnly","selectedCredit","setSelectedCredit","useState","phoneNumber","setPhoneNumber","phoneError","setPhoneError","numericOptions","option","maxCredit","exceedsMaxCredit","isRequestAction","creditError","useEffect","error","validatePhone","phone","numberOnly","handlePhoneChange","value","handleCreditChange","handleSubmit","credit","reset","buttonText","isButtonDisabled","isOptionSelected","React","Dialog","Typography","Input","Button"],"mappings":"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"}

package/dist/index.es20.js

@@ -1,52 +1,77 @@
-import e from "react";
-import { DropdownMenu as g, DropdownMenuTrigger as p, DropdownMenuContent as h, DropdownMenuLabel as E, DropdownMenuSeparator as s, DropdownMenuGroup as w, DropdownMenuSub as x, DropdownMenuSubTrigger as N, DropdownMenuPortal as D, DropdownMenuSubContent as M, DropdownMenuItem as c } from "./index.es91.js";
-function v({
-  trigger: o,
-  optionGroups: r,
-  header: t = "My Account",
-  dropdownContentProps: m = {},
-  container: u
-}) {
-  return /* @__PURE__ */ e.createElement(g, null, /* @__PURE__ */ e.createElement(p, { asChild: !0 }, o), /* @__PURE__ */ e.createElement(
-    h,
+import * as e from "react";
+import { cn as s } from "./index.es89.js";
+import { AlertVariants as v, AlertContentVariants as h, AlertButtonVariants as u } from "./index.es102.js";
+import { Button as _ } from "./index.es9.js";
+import { Typography as N } from "./index.es19.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",
     {
-      className: "bg-light-1 w-56 shadow-lg  rounded-[8px]",
-      container: u,
-      ...m
+      id: o,
+      ref: g,
+      role: "alert",
+      ...d,
+      className: s(v({ variant: r, shortContent: i }), t)
     },
-    t && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(E, null, t), /* @__PURE__ */ e.createElement(s, { className: "border-t border-neutral-1" })),
-    r.map((b, n) => /* @__PURE__ */ e.createElement(e.Fragment, { key: n }, /* @__PURE__ */ e.createElement(w, null, b.map((a, d) => a.subItems ? /* @__PURE__ */ e.createElement(x, { key: d }, /* @__PURE__ */ e.createElement(
-      N,
+    /* @__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(
+      _,
       {
-        disabled: a.disabled,
-        className: `data-[disabled]:hover:bg-light-1 hover:bg-light-2 rounded-md py-[11px] px-4 cursor-pointer data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed ${a.className}`
+        variant: "secondary",
+        size: "sm",
+        onClick: p,
+        className: s(u({ shortContent: i }))
       },
-      a.icon,
-      /* @__PURE__ */ e.createElement("span", { className: "text-xs" }, a.label)
-    ), /* @__PURE__ */ e.createElement(D, null, /* @__PURE__ */ e.createElement(M, { className: "bg-light-1" }, a.subItems?.map((l, i) => /* @__PURE__ */ e.createElement(
-      c,
-      {
-        disabled: l?.disabled,
-        className: ` data-[disabled]:hover:bg-light-1 hover:bg-light-2  data-[disabled]:cursor-not-allowed py-[11px] px-4 rounded-md ${l.className}`,
-        onClick: l.onClick,
-        key: i
-      },
-      l.icon,
-      /* @__PURE__ */ e.createElement("span", { className: "text-xs" }, l.label)
-    ))))) : /* @__PURE__ */ e.createElement(
-      c,
-      {
-        className: `data-[disabled]:hover:bg-light-1 hover:bg-light-2 data-[disabled]:cursor-not-allowed hover:rounded-md py-[11px] px-4 h-[42px] ${a.className}`,
-        onClick: a.onClick,
-        disabled: a.disabled,
-        key: d
-      },
-      a.icon,
-      /* @__PURE__ */ e.createElement("span", { className: "text-xs" }, a.label)
-    ))), n + 1 !== r.length && /* @__PURE__ */ e.createElement(s, { className: "border-t border-neutral-1" })))
-  ));
-}
+      f
+    ))
+  )
+);
+x.displayName = "Alert";
 export {
-  v as Dropdown
+  x as Alert,
+  v as AlertVariants
 };
 //# sourceMappingURL=index.es20.js.map

package/dist/index.es20.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es20.js","sources":["../src/components/molecules/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import React from 'react'\n\n// import { Button } from '../button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  // DropdownMenuShortcut,\n  //   DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from './dropdown-menu-components'\nimport { DropdownMenuProps } from './dropdown-menu.types'\n\nexport function Dropdown({\n  trigger,\n  optionGroups,\n  header = 'My Account',\n  dropdownContentProps = {},\n  container,\n}: DropdownMenuProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"bg-light-1 w-56 shadow-lg  rounded-[8px]\"\n        container={container}\n        {...dropdownContentProps}\n      >\n        {/* label section (string/jsx) */}\n        {header && (\n          <>\n            <DropdownMenuLabel>{header}</DropdownMenuLabel>\n            <DropdownMenuSeparator className=\"border-t border-neutral-1\" />\n          </>\n        )}\n        {optionGroups.map((options, groupIndex) => {\n          return (\n            <React.Fragment key={groupIndex}>\n              <DropdownMenuGroup>\n                {options.map((option, optionIndex) => {\n                  if (option.subItems) {\n                    return (\n                      <DropdownMenuSub key={optionIndex}>\n                        <DropdownMenuSubTrigger\n                          disabled={option['disabled']}\n                          className={`data-[disabled]:hover:bg-light-1 hover:bg-light-2 rounded-md py-[11px] px-4 cursor-pointer data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed ${option.className}`}\n                        >\n                          {option.icon}\n                          <span className=\"text-xs\">{option.label}</span>\n                        </DropdownMenuSubTrigger>\n                        <DropdownMenuPortal>\n                          <DropdownMenuSubContent className=\"bg-light-1\">\n                            {option.subItems?.map((subItem, subItemIndex) => (\n                              <DropdownMenuItem\n                                disabled={subItem?.disabled}\n                                className={` data-[disabled]:hover:bg-light-1 hover:bg-light-2  data-[disabled]:cursor-not-allowed py-[11px] px-4 rounded-md ${subItem.className}`}\n                                onClick={subItem.onClick}\n                                key={subItemIndex}\n                              >\n                                {subItem.icon}\n                                <span className=\"text-xs\">{subItem.label}</span>\n                              </DropdownMenuItem>\n                            ))}\n                          </DropdownMenuSubContent>\n                        </DropdownMenuPortal>\n                      </DropdownMenuSub>\n                    )\n                  }\n                  return (\n                    <DropdownMenuItem\n                      className={`data-[disabled]:hover:bg-light-1 hover:bg-light-2 data-[disabled]:cursor-not-allowed hover:rounded-md py-[11px] px-4 h-[42px] ${option.className}`}\n                      onClick={option.onClick}\n                      disabled={option['disabled']}\n                      key={optionIndex}\n                    >\n                      {option.icon}\n                      <span className=\"text-xs\">{option.label}</span>\n\n                      {/* <DropdownMenuShortcut>⌘B</DropdownMenuShortcut> */}\n                    </DropdownMenuItem>\n                  )\n                })}\n              </DropdownMenuGroup>\n              {groupIndex + 1 !== optionGroups.length && (\n                <DropdownMenuSeparator className=\"border-t border-neutral-1\" />\n              )}\n            </React.Fragment>\n          )\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n"],"names":["Dropdown","trigger","optionGroups","header","dropdownContentProps","container","DropdownMenu","React","DropdownMenuTrigger","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","options","groupIndex","DropdownMenuGroup","option","optionIndex","DropdownMenuSub","DropdownMenuSubTrigger","DropdownMenuPortal","DropdownMenuSubContent","subItem","subItemIndex","DropdownMenuItem"],"mappings":";;AAoBO,SAASA,EAAS;AAAA,EACvB,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,sBAAAC,IAAuB,CAAA;AAAA,EACvB,WAAAC;AACF,GAAsB;AACpB,yCACGC,GAAA,MACCC,gBAAAA,EAAA,cAACC,KAAoB,SAAO,GAAA,GAAEP,CAAQ,GACtCM,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,WAAAJ;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,IAGHD,KACCI,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MACEA,gBAAAA,EAAA,cAACG,GAAA,MAAmBP,CAAO,GAC3BI,gBAAAA,EAAA,cAACI,GAAA,EAAsB,WAAU,4BAAA,CAA4B,CAC/D;AAAA,IAEDT,EAAa,IAAI,CAACU,GAASC,MAExBN,gBAAAA,EAAA,cAACA,EAAM,UAAN,EAAe,KAAKM,EAAA,GACnBN,gBAAAA,EAAA,cAACO,GAAA,MACEF,EAAQ,IAAI,CAACG,GAAQC,MAChBD,EAAO,WAEPR,gBAAAA,EAAA,cAACU,GAAA,EAAgB,KAAKD,EAAA,GACpBT,gBAAAA,EAAA;AAAA,MAACW;AAAA,MAAA;AAAA,QACC,UAAUH,EAAO;AAAA,QACjB,WAAW,4JAA4JA,EAAO,SAAS;AAAA,MAAA;AAAA,MAEtLA,EAAO;AAAA,MACRR,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,UAAA,GAAWQ,EAAO,KAAM;AAAA,IAAA,GAE1CR,gBAAAA,EAAA,cAACY,GAAA,MACCZ,gBAAAA,EAAA,cAACa,GAAA,EAAuB,WAAU,aAAA,GAC/BL,EAAO,UAAU,IAAI,CAACM,GAASC,MAC9Bf,gBAAAA,EAAA;AAAA,MAACgB;AAAA,MAAA;AAAA,QACC,UAAUF,GAAS;AAAA,QACnB,WAAW,oHAAoHA,EAAQ,SAAS;AAAA,QAChJ,SAASA,EAAQ;AAAA,QACjB,KAAKC;AAAA,MAAA;AAAA,MAEJD,EAAQ;AAAA,MACTd,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,UAAA,GAAWc,EAAQ,KAAM;AAAA,IAAA,CAE5C,CACH,CACF,CACF,IAIFd,gBAAAA,EAAA;AAAA,MAACgB;AAAA,MAAA;AAAA,QACC,WAAW,iIAAiIR,EAAO,SAAS;AAAA,QAC5J,SAASA,EAAO;AAAA,QAChB,UAAUA,EAAO;AAAA,QACjB,KAAKC;AAAA,MAAA;AAAA,MAEJD,EAAO;AAAA,MACRR,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,UAAA,GAAWQ,EAAO,KAAM;AAAA,IAAA,CAK7C,CACH,GACCF,IAAa,MAAMX,EAAa,UAC/BK,gBAAAA,EAAA,cAACI,GAAA,EAAsB,WAAU,4BAAA,CAA4B,CAEjE,CAEH;AAAA,EAAA,CAEL;AAEJ;"}
+{"version":3,"file":"index.es20.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;"}

package/dist/index.es21.js

@@ -1,132 +1,53 @@
-import * as e from "react";
-import { cn as N } from "./index.es81.js";
-import { X as w, ChevronDown as C, ChevronUp as k, Check as D } from "lucide-react";
-import { Button as P } from "./index.es7.js";
-import { Command as I, CommandInput as B, CommandList as R, CommandEmpty as S, CommandGroup as j, CommandItem as K } from "./index.es53.js";
-import { Popover as M, PopoverTrigger as O, PopoverContent as T } from "./index.es82.js";
-import { Badge as U } from "./index.es6.js";
-import { Typography as m } from "./index.es17.js";
-function X({
-  options: c,
-  selected: a,
-  onChange: s,
-  className: g,
-  popoverContentProps: h,
-  listEmptyComponent: i,
-  placeholder: y,
-  searchPlaceholder: E = "Search",
-  onSearchChange: u,
-  onChangePopoverOpen: f,
-  container: v,
-  ...b
-}) {
-  const [o, l] = e.useState(!1), p = e.useRef(null), d = (t) => {
-    s(a.filter((n) => n !== t));
-  }, x = (t) => {
-    l(t), f && f(t);
-  };
-  return /* @__PURE__ */ e.createElement(M, { open: o, onOpenChange: x, ...b }, /* @__PURE__ */ e.createElement(
-    O,
+import { Breadcrumb as b, BreadcrumbList as h, BreadcrumbSeparator as o, BreadcrumbItem as s, BreadcrumbEllipsis as y, BreadcrumbLink as i } from "./index.es99.js";
+import { DropdownMenu as d, DropdownMenuTrigger as f, DropdownMenuContent as B, DropdownMenuItem as w } from "./index.es100.js";
+import e from "react";
+import { Typography as N } from "./index.es19.js";
+import { cn as D } from "./index.es89.js";
+import { CrumbVariants as k } from "./index.es101.js";
+function u({ field: t, isSelected: r }) {
+  return /* @__PURE__ */ e.createElement(s, null, /* @__PURE__ */ e.createElement(
+    i,
     {
-      className: `min-h-[40px] h-fit px-3 py-2
-        ${o ? "border-primary-2 ring-4 ring-primary-1" : "border-neutral-2"}
-        focus:border-primary-2 focus:ring-0 focus:ring-primary-1`,
-      ref: p,
-      asChild: !0
+      href: t?.href,
+      className: D(
+        k({ isSelected: r, type: t?.icon ? "icon" : "text" })
+      )
     },
-    /* @__PURE__ */ e.createElement(
-      P,
-      {
-        variant: "secondary",
-        role: "combobox",
-        "aria-expanded": o,
-        className: "w-full justify-between focus:ring-0 ",
-        onClick: () => l(!o)
-      },
-      /* @__PURE__ */ e.createElement("div", { className: "flex flex-wrap gap-1" }, a.length > 0 ? a.map((t) => {
-        const n = c.find(
-          (r) => r.value === t
-        );
-        return /* @__PURE__ */ e.createElement(
-          U,
-          {
-            variant: "default",
-            key: t,
-            size: "sm",
-            showBorder: !0
-          },
-          /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1 max-w-[180px] " }, n?.icon, /* @__PURE__ */ e.createElement("span", { className: "truncate" }, n?.label)),
-          /* @__PURE__ */ e.createElement(
-            "button",
-            {
-              className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
-              onKeyDown: (r) => {
-                r.key === "Enter" && d(t);
-              },
-              onMouseDown: (r) => {
-                r.preventDefault(), r.stopPropagation();
-              },
-              onClick: (r) => {
-                r.stopPropagation(), d(t);
-              }
-            },
-            /* @__PURE__ */ e.createElement(w, { className: "w-3 h-3 text-muted-foreground hover:text-foreground" })
-          )
-        );
-      }) : /* @__PURE__ */ e.createElement(m, { variant: "body2", className: "text-light-4" }, y ?? "Select options")),
-      o ? /* @__PURE__ */ e.createElement(k, { className: "w-4 h-4 opacity-50 shrink-0" }) : /* @__PURE__ */ e.createElement(C, { className: "w-4 h-4 opacity-50 shrink-0" })
-    )
-  ), /* @__PURE__ */ e.createElement(
-    T,
+    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,
     {
-      style: {
-        width: p.current?.clientWidth
-      },
-      className: "w-full p-0 mt-1 bg-light-1",
-      onEscapeKeyDown: () => l(!1),
-      container: v,
-      ...h
+      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`
     },
-    /* @__PURE__ */ e.createElement(
-      I,
+    c.map((n, a) => /* @__PURE__ */ e.createElement(
+      w,
       {
-        className: g,
-        shouldFilter: !u
+        key: a,
+        className: "hover:bg-light-3"
       },
-      /* @__PURE__ */ e.createElement(
-        B,
-        {
-          placeholder: E,
-          showIcon: !0,
-          onValueChange: u
-        }
-      ),
-      /* @__PURE__ */ e.createElement(R, { className: "" }, /* @__PURE__ */ e.createElement(S, null, i || /* @__PURE__ */ e.createElement(m, { variant: "body3", className: "text-light-4" }, "No items found")), /* @__PURE__ */ e.createElement(j, { className: "px-0 my-1 overflow-y-auto max-h-64 custom-scrollbar" }, c.map((t) => /* @__PURE__ */ e.createElement(
-        K,
-        {
-          key: t.value,
-          className: `mx-1.5 my-1 justify-between rounded-md bg-light-1 p-2 text-light-2 ${a.indexOf(t.value) !== -1 ? "bg-light-2" : ""}`,
-          onSelect: () => {
-            s(
-              a.includes(t.value) ? a.filter((n) => n !== t.value) : [...a, t.value]
-            ), l(!0);
-          }
-        },
-        /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, t.icon, /* @__PURE__ */ e.createElement(m, { variant: "body2" }, t.label)),
-        /* @__PURE__ */ e.createElement(
-          D,
-          {
-            className: N(
-              "h-5 w-5 stroke-brand",
-              a.includes(t.value) ? "opacity-100" : "opacity-0"
-            )
-          }
-        )
-      ))))
-    )
-  ));
+      /* @__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 })))));
 }
 export {
-  X as MultiCombobox
+  L as BreadcrumbDemo
 };
 //# sourceMappingURL=index.es21.js.map

package/dist/index.es21.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es21.js","sources":["../src/components/molecules/multi-combobox/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nimport { Check, X, ChevronDown, ChevronUp } from 'lucide-react'\nimport { Button } from '@/components/atoms/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/unstyled/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/unstyled/popover/popover-components'\nimport { Badge } from '@/components/atoms/badge'\nimport { Typography } from '../../atoms/typography'\nimport { MultiSelectProps } from './multi-select-combobox.types'\n\nfunction MultiCombobox({\n  options,\n  selected,\n  onChange,\n  className,\n  popoverContentProps,\n  listEmptyComponent,\n  placeholder,\n  searchPlaceholder = 'Search',\n  onSearchChange,\n  onChangePopoverOpen,\n\n  container,\n  ...props\n}: MultiSelectProps) {\n  const [open, setOpen] = React.useState(false)\n  const popoverRef = React.useRef<HTMLButtonElement>(null)\n\n  const handleUnselect = (item: string) => {\n    onChange(selected.filter((i) => i !== item))\n  }\n\n  const handlePopoverOpen = (newOpen: boolean) => {\n    setOpen(newOpen)\n    onChangePopoverOpen && onChangePopoverOpen(newOpen)\n  }\n\n  return (\n    <Popover open={open} onOpenChange={handlePopoverOpen} {...props}>\n      <PopoverTrigger\n        className={`min-h-[40px] h-fit px-3 py-2\n        ${open ? 'border-primary-2 ring-4 ring-primary-1' : 'border-neutral-2'}\n        focus:border-primary-2 focus:ring-0 focus:ring-primary-1`}\n        ref={popoverRef}\n        asChild\n      >\n        <Button\n          variant=\"secondary\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className={`w-full justify-between focus:ring-0 `}\n          onClick={() => setOpen(!open)}\n        >\n          <div className=\"flex flex-wrap gap-1\">\n            {selected.length > 0 ? (\n              selected.map((item) => {\n                const selectedItem = options.find(\n                  (option) => option.value === item\n                )\n                return (\n                  <Badge\n                    variant=\"default\"\n                    key={item}\n                    size={'sm'}\n                    //   className=\"mb-1 mr-1\"\n                    showBorder\n                    // onClick={() => handleUnselect(item)}\n                  >\n                    <div className=\"flex items-center gap-1 max-w-[180px] \">\n                      {selectedItem?.icon}\n                      <span className=\"truncate\">{selectedItem?.label}</span>\n                    </div>\n                    <button\n                      className=\"ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2\"\n                      onKeyDown={(e) => {\n                        if (e.key === 'Enter') {\n                          handleUnselect(item)\n                        }\n                      }}\n                      onMouseDown={(e) => {\n                        e.preventDefault()\n                        e.stopPropagation()\n                      }}\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        handleUnselect(item)\n                      }}\n                    >\n                      <X className=\"w-3 h-3 text-muted-foreground hover:text-foreground\" />\n                    </button>\n                  </Badge>\n                )\n              })\n            ) : (\n              <Typography variant=\"body2\" className=\"text-light-4\">\n                {placeholder ?? 'Select options'}\n              </Typography>\n            )}\n          </div>\n          {!open ? (\n            <ChevronDown className=\"w-4 h-4 opacity-50 shrink-0\" />\n          ) : (\n            <ChevronUp className=\"w-4 h-4 opacity-50 shrink-0\" />\n          )}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        style={{\n          width: popoverRef.current?.clientWidth,\n        }}\n        className=\"w-full p-0 mt-1 bg-light-1\"\n        onEscapeKeyDown={() => setOpen(false)}\n        container={container}\n        {...popoverContentProps}\n      >\n        <Command\n          className={className}\n          shouldFilter={onSearchChange ? false : true}\n        >\n          <CommandInput\n            placeholder={searchPlaceholder}\n            showIcon={true}\n            onValueChange={onSearchChange}\n          />\n\n          <CommandList className=\"\">\n            <CommandEmpty>\n              {listEmptyComponent ? (\n                listEmptyComponent\n              ) : (\n                <Typography variant={'body3'} className=\"text-light-4\">\n                  No items found\n                </Typography>\n              )}\n            </CommandEmpty>\n            <CommandGroup className=\"px-0 my-1 overflow-y-auto max-h-64 custom-scrollbar\">\n              {options.map((option) => (\n                <CommandItem\n                  key={option.value}\n                  className={`mx-1.5 my-1 justify-between rounded-md bg-light-1 p-2 text-light-2 ${selected.indexOf(option.value) !== -1 ? 'bg-light-2' : ''}`}\n                  onSelect={() => {\n                    onChange(\n                      selected.includes(option.value)\n                        ? selected.filter((item) => item !== option.value)\n                        : [...selected, option.value]\n                    )\n                    setOpen(true)\n                  }}\n                >\n                  <div className=\"flex items-center gap-1\">\n                    {option.icon}\n                    <Typography variant={'body2'}>{option.label}</Typography>\n                  </div>\n                  <Check\n                    className={cn(\n                      'h-5 w-5 stroke-brand',\n                      selected.includes(option.value)\n                        ? 'opacity-100'\n                        : 'opacity-0'\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport { MultiCombobox }\n"],"names":["MultiCombobox","options","selected","onChange","className","popoverContentProps","listEmptyComponent","placeholder","searchPlaceholder","onSearchChange","onChangePopoverOpen","container","props","open","setOpen","React","popoverRef","handleUnselect","item","i","handlePopoverOpen","newOpen","Popover","PopoverTrigger","Button","selectedItem","option","Badge","e","X","Typography","ChevronUp","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Check","cn"],"mappings":"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"}
+{"version":3,"file":"index.es21.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;"}

package/dist/index.es22.js

@@ -1,109 +1,52 @@
-import * as e from "react";
-import { cn as g } from "./index.es81.js";
-import { X as y, ChevronDown as v, ChevronUp as h, Check as E } from "lucide-react";
-import { Button as b } from "./index.es7.js";
-import { Command as w, CommandList as x, CommandEmpty as N, CommandGroup as C, CommandItem as k } from "./index.es53.js";
-import { Popover as D, PopoverTrigger as P, PopoverContent as S } from "./index.es82.js";
-import { Badge as B } from "./index.es6.js";
-import { Typography as c } from "./index.es17.js";
-function U({
-  options: s,
-  selected: r,
-  onChange: i,
-  className: f,
-  container: p,
-  ...d
+import e from "react";
+import { DropdownMenu as g, DropdownMenuTrigger as p, DropdownMenuContent as h, DropdownMenuLabel as E, DropdownMenuSeparator as s, DropdownMenuGroup as w, DropdownMenuSub as x, DropdownMenuSubTrigger as N, DropdownMenuPortal as D, DropdownMenuSubContent as M, DropdownMenuItem as c } from "./index.es100.js";
+function v({
+  trigger: o,
+  optionGroups: r,
+  header: t = "My Account",
+  dropdownContentProps: m = {},
+  container: u
 }) {
-  const [l, o] = e.useState(!1), u = e.useRef(null), m = (t) => {
-    i(r.filter((n) => n !== t));
-  };
-  return /* @__PURE__ */ e.createElement(D, { open: l, onOpenChange: o, ...d }, /* @__PURE__ */ e.createElement(
-    P,
+  return /* @__PURE__ */ e.createElement(g, null, /* @__PURE__ */ e.createElement(p, { asChild: !0 }, o), /* @__PURE__ */ e.createElement(
+    h,
     {
-      className: `min-h-[40px] h-fit px-3 py-2
-        ${l ? "border-primary-2 ring-4 ring-primary-1" : "border-neutral-2"}
-        focus:border-primary-2 focus:ring-0 focus:ring-primary-1`,
-      ref: u,
-      asChild: !0
+      className: "bg-light-1 w-56 shadow-lg  rounded-[8px]",
+      container: u,
+      ...m
     },
-    /* @__PURE__ */ e.createElement(
-      b,
+    t && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(E, null, t), /* @__PURE__ */ e.createElement(s, { className: "border-t border-neutral-1" })),
+    r.map((b, n) => /* @__PURE__ */ e.createElement(e.Fragment, { key: n }, /* @__PURE__ */ e.createElement(w, null, b.map((a, d) => a.subItems ? /* @__PURE__ */ e.createElement(x, { key: d }, /* @__PURE__ */ e.createElement(
+      N,
       {
-        variant: "secondary",
-        role: "combobox",
-        "aria-expanded": l,
-        className: "w-full justify-between focus:ring-0 ",
-        onClick: () => o(!l)
+        disabled: a.disabled,
+        className: `data-[disabled]:hover:bg-light-1 hover:bg-light-2 rounded-md py-[11px] px-4 cursor-pointer data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed ${a.className}`
       },
-      /* @__PURE__ */ e.createElement("div", { className: "flex flex-wrap gap-1" }, r.length > 0 ? r.map((t) => {
-        const n = s.find(
-          (a) => a.value === t
-        );
-        return /* @__PURE__ */ e.createElement(
-          B,
-          {
-            variant: "default",
-            key: t,
-            size: "sm",
-            showBorder: !0,
-            onClick: () => m(t)
-          },
-          /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, n?.icon, n?.label),
-          /* @__PURE__ */ e.createElement(
-            "button",
-            {
-              className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
-              onKeyDown: (a) => {
-                a.key === "Enter" && m(t);
-              },
-              onMouseDown: (a) => {
-                a.preventDefault(), a.stopPropagation();
-              },
-              onClick: (a) => {
-                a.stopPropagation(), m(t);
-              }
-            },
-            /* @__PURE__ */ e.createElement(y, { className: "w-3 h-3 text-muted-foreground hover:text-foreground" })
-          )
-        );
-      }) : /* @__PURE__ */ e.createElement(c, { variant: "body2", className: "text-light-4" }, "Select option")),
-      l ? /* @__PURE__ */ e.createElement(h, { className: "w-4 h-4 opacity-50 shrink-0" }) : /* @__PURE__ */ e.createElement(v, { className: "w-4 h-4 opacity-50 shrink-0" })
-    )
-  ), /* @__PURE__ */ e.createElement(
-    S,
-    {
-      style: {
-        width: u.current?.clientWidth
+      a.icon,
+      /* @__PURE__ */ e.createElement("span", { className: "text-xs" }, a.label)
+    ), /* @__PURE__ */ e.createElement(D, null, /* @__PURE__ */ e.createElement(M, { className: "bg-light-1" }, a.subItems?.map((l, i) => /* @__PURE__ */ e.createElement(
+      c,
+      {
+        disabled: l?.disabled,
+        className: ` data-[disabled]:hover:bg-light-1 hover:bg-light-2  data-[disabled]:cursor-not-allowed py-[11px] px-4 rounded-md ${l.className}`,
+        onClick: l.onClick,
+        key: i
       },
-      className: "w-full p-0 bg-light-1",
-      onEscapeKeyDown: () => o(!1),
-      container: p
-    },
-    /* @__PURE__ */ e.createElement(w, { className: f }, /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement(N, null, /* @__PURE__ */ e.createElement(c, { variant: "body3" }, "No items found")), /* @__PURE__ */ e.createElement(C, { className: "px-0 my-1 overflow-y-auto max-h-64 custom-scrollbar" }, s.map((t) => /* @__PURE__ */ e.createElement("div", { className: "py-0.5 px-1.5 bg-white", key: t.value }, /* @__PURE__ */ e.createElement(
-      k,
+      l.icon,
+      /* @__PURE__ */ e.createElement("span", { className: "text-xs" }, l.label)
+    ))))) : /* @__PURE__ */ e.createElement(
+      c,
       {
-        key: t.value,
-        className: `justify-between p-2 rounded-md text-light-2 ${r.indexOf(t.value) !== -1 ? "bg-light-2" : ""}`,
-        onSelect: () => {
-          i(
-            r.includes(t.value) ? r.filter((n) => n !== t.value) : [...r, t.value]
-          ), o(!0);
-        }
+        className: `data-[disabled]:hover:bg-light-1 hover:bg-light-2 data-[disabled]:cursor-not-allowed hover:rounded-md py-[11px] px-4 h-[42px] ${a.className}`,
+        onClick: a.onClick,
+        disabled: a.disabled,
+        key: d
       },
-      /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-1" }, t.icon, /* @__PURE__ */ e.createElement(c, { variant: "body2" }, t.label)),
-      /* @__PURE__ */ e.createElement(
-        E,
-        {
-          className: g(
-            "h-5 w-5 stroke-brand",
-            r.includes(t.value) ? "opacity-100" : "opacity-0"
-          )
-        }
-      )
-    ))))))
+      a.icon,
+      /* @__PURE__ */ e.createElement("span", { className: "text-xs" }, a.label)
+    ))), n + 1 !== r.length && /* @__PURE__ */ e.createElement(s, { className: "border-t border-neutral-1" })))
   ));
 }
 export {
-  U as MultiSelect
+  v as Dropdown
 };
 //# sourceMappingURL=index.es22.js.map