geoiq-frontend-ui-kit 2.0.1 → 2.0.2

package/dist/index.es53.js

@@ -1,107 +1,147 @@
-import * as e from "react";
-import { Command as m, useCommandState as s } from "cmdk";
-import { Search as p } from "lucide-react";
-import { cn as d } from "./index.es81.js";
-import { Dialog as c, DialogContent as i } from "./index.es70.js";
-const n = e.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e.createElement(
-  m,
-  {
-    ref: r,
-    className: d(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      t
+import e, { useState as z } from "react";
+import { Typography as a } from "./index.es19.js";
+import { Badge as f } from "./index.es8.js";
+import { StarScore as B } from "./index.es52.js";
+import { Button as G } from "./index.es9.js";
+import { Skeleton as l } from "./index.es14.js";
+import { StoreInsightsSection as I, StoreOverviewSection as R, FootfallChartSection as P, CannibalisationChartSection as q, ReportSnippetGalleryView as F } from "./index.es98.js";
+const Y = ({
+  map: E,
+  title: y,
+  subTitle: v,
+  tag: p,
+  score: c,
+  searched_on: x,
+  streetViewData: n,
+  highlights: s,
+  isStreetViewDataLoading: N,
+  handleStreetViewClick: S,
+  storeHighlights: d,
+  isLoading: r,
+  catchmentInsights: u,
+  footfallChartData: i,
+  cannibalisationChartData: o,
+  customModelSection: w,
+  customSection: b
+  // customButton,
+}) => {
+  const [_, k] = z(!1), [j, g] = e.useState(0), A = new Date(Number(x) * 1e3).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  }), O = n?.every(
+    (t) => t.image_url === null
+  ), h = () => {
+    k((t) => !t);
+  };
+  return /* @__PURE__ */ e.createElement("div", { className: "flex flex-col h-full min-h-0" }, E ? /* @__PURE__ */ e.createElement("div", { className: "flex-shrink-0" }, r ? /* @__PURE__ */ e.createElement("div", { className: "flex flex-row-reverse items-center justify-between w-full p-1" }, /* @__PURE__ */ e.createElement(l, { className: "w-full h-40 " })) : /* @__PURE__ */ e.createElement("div", { className: "h-[200px]" }, E)) : null, /* @__PURE__ */ e.createElement("div", { className: "flex-shrink-0" }, /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-1 p-3" }, r ? /* @__PURE__ */ e.createElement(l, { className: "w-full h-8 " }) : /* @__PURE__ */ e.createElement(a, { variant: "h3" }, y), r ? /* @__PURE__ */ e.createElement("div", { className: "flex flex-row-reverse items-center justify-between w-full" }, /* @__PURE__ */ e.createElement(l, { className: "w-20 h-5 " }), /* @__PURE__ */ e.createElement(l, { className: "w-32 h-5 " })) : /* @__PURE__ */ e.createElement("div", { className: "flex flex-row-reverse items-center justify-between w-full " }, p ? /* @__PURE__ */ e.createElement(f, { variant: "neutral", size: "sm", showBorder: !0 }, p) : /* @__PURE__ */ e.createElement("div", null), v !== void 0 && /* @__PURE__ */ e.createElement(
+    a,
+    {
+      variant: "body4",
+      className: "w-1/2 text-light-4 fit-content"
+    },
+    v
+  ))), /* @__PURE__ */ e.createElement("div", { className: "w-full p-3 border-b border-neutral-1" }, r ? /* @__PURE__ */ e.createElement("div", { className: "flex flex-row-reverse items-center justify-between w-full" }, /* @__PURE__ */ e.createElement(l, { className: "h-6 w-[120px]" }), /* @__PURE__ */ e.createElement(l, { className: "h-6 w-[120px]" })) : /* @__PURE__ */ e.createElement("div", { className: "flex flex-row items-center justify-between" }, c?.value && /* @__PURE__ */ e.createElement("div", { className: "flex items-center justify-between gap-1" }, /* @__PURE__ */ e.createElement(
+    B,
+    {
+      score: c.value,
+      starGap: 1,
+      starSize: 24,
+      isLoading: r || c?.isLoading
+    }
+  ), !c.isLoading && /* @__PURE__ */ e.createElement(a, { variant: "body5", className: "text-light-3" }, "(", c.value, "%)")), x && /* @__PURE__ */ e.createElement(
+    f,
+    {
+      variant: "default",
+      size: "sm",
+      showBorder: !0
+    },
+    `Added on: ${A}`
+  )))), /* @__PURE__ */ e.createElement("div", { className: "flex-1 min-h-0 overflow-y-auto flex flex-col" }, w ? /* @__PURE__ */ e.createElement("div", { className: "p-3" }, w) : null, /* @__PURE__ */ e.createElement("div", null, s && r ? /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-3 p-3" }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(a, { variant: "body6", className: "text-light-2" }, /* @__PURE__ */ e.createElement(l, { className: "w-28 h-7" }), " ")), /* @__PURE__ */ e.createElement("div", { className: "flex flex-row flex-wrap gap-2" }, [...Array(6)].map((t, m) => /* @__PURE__ */ e.createElement(l, { key: m, className: "w-28 h-7" })))) : s && s.length > 0 ? /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-3 p-3" }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(a, { variant: "body6", className: "text-light-2" }, "Location Highlights")), /* @__PURE__ */ e.createElement("div", { className: "flex flex-row flex-wrap gap-2" }, s.map((t, m) => /* @__PURE__ */ e.createElement(
+    f,
+    {
+      key: m,
+      variant: t.variant,
+      showBorder: !0,
+      className: "normal-case"
+    },
+    t.name
+  )))) : null), n !== void 0 && /* @__PURE__ */ e.createElement("div", { className: "z-10 flex flex-col items-start justify-between p-3 pb-0 gap-1" }, n === null && N === !1 ? /* @__PURE__ */ e.createElement("div", { className: "w-fit" }, /* @__PURE__ */ e.createElement(
+    G,
+    {
+      variant: "secondary",
+      size: "sm",
+      className: "flex gap-2 px-4 py-2 focus:ring-0",
+      onClick: S
+    },
+    /* @__PURE__ */ e.createElement(
+      "img",
+      {
+        src: "https://frontend-static-files.geoiq.io/strapi/download_cloud_7761a0bc2a.svg",
+        height: 16,
+        width: 16,
+        alt: "download-btn"
+      }
     ),
-    ...a
-  }
-));
-n.displayName = m.displayName;
-const E = ({ children: t, ...a }) => /* @__PURE__ */ e.createElement(c, { ...a }, /* @__PURE__ */ e.createElement(i, { className: "p-0 overflow-hidden shadow-lg" }, /* @__PURE__ */ e.createElement(n, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5" }, t))), u = e.forwardRef(({ className: t, showIcon: a = !0, ...r }, o) => /* @__PURE__ */ e.createElement("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "" }, a && /* @__PURE__ */ e.createElement(p, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ e.createElement(
-  m.Input,
-  {
-    ref: o,
-    className: d(
-      "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-      t
-    ),
-    ...r
-  }
-)));
-u.displayName = m.Input.displayName;
-const f = e.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e.createElement(
-  m.List,
-  {
-    ref: r,
-    className: d("max-h-[300px] overflow-y-auto overflow-x-hidden", t),
-    ...a
-  }
-));
-f.displayName = m.List.displayName;
-const g = e.forwardRef(({ className: t, ...a }, r) => s((l) => l.filtered.count === 0) ? /* @__PURE__ */ e.createElement(
-  "div",
-  {
-    ref: r,
-    className: d("py-6 text-sm text-center", t),
-    ...a
-  }
-) : null);
-g.displayName = m.Empty.displayName;
-const x = e.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e.createElement(
-  m.Group,
-  {
-    ref: r,
-    className: d(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      t
-    ),
-    ...a
-  }
-));
-x.displayName = m.Group.displayName;
-const h = e.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e.createElement(
-  m.Separator,
-  {
-    ref: r,
-    className: d("-mx-1 h-px bg-border", t),
-    ...a
-  }
-));
-h.displayName = m.Separator.displayName;
-const N = e.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e.createElement(
-  m.Item,
-  {
-    ref: r,
-    disabled: a.disabled ?? !1,
-    className: d(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-light-2 aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled=true]:opacity-50",
-      t
-    ),
-    ...a
-  }
-));
-N.displayName = m.Item.displayName;
-const y = ({
-  className: t,
-  ...a
-}) => /* @__PURE__ */ e.createElement(
-  "span",
-  {
-    className: d(
-      "ml-auto text-xs tracking-widest text-muted-foreground",
-      t
-    ),
-    ...a
-  }
-);
-y.displayName = "CommandShortcut";
+    "Street-view Photos"
+  )) : /* @__PURE__ */ e.createElement(a, { variant: "body6", className: "text-light-2" }, "Street-view Photos"), /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      id: "street",
+      className: "flex flex-row max-w-full gap-2 overflow-x-scroll",
+      style: { scrollbarWidth: "none" }
+    },
+    N ? [...Array(4)].map((t, m) => /* @__PURE__ */ e.createElement(
+      l,
+      {
+        key: m,
+        className: "rounded-lg min-h-[160px] min-w-[120px]"
+      }
+    )) : O ? /* @__PURE__ */ e.createElement(a, { variant: "body1" }, "No Images Available") : n && n?.map(
+      (t, m) => /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          key: m,
+          className: "relative min-h-[160px] min-w-[120px]"
+        },
+        /* @__PURE__ */ e.createElement("div", { className: "inline" }, t?.image_url && t?.image_url !== null ? /* @__PURE__ */ e.createElement(
+          "img",
+          {
+            src: t?.image_url,
+            alt: "map_img",
+            className: "object-cover w-full h-full rounded-lg cursor-pointer",
+            role: "button",
+            tabIndex: 0,
+            onClick: () => {
+              g(Number(m)), h();
+            }
+          }
+        ) : null)
+      )
+    )
+  )), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-3 p-3" }, u ? r ? /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", { className: "flex mb-4" }, /* @__PURE__ */ e.createElement(a, { variant: "body4", className: "text-light-2" }, /* @__PURE__ */ e.createElement(l, { className: "w-28 h-7" }))), /* @__PURE__ */ e.createElement("div", { className: "p-3 border rounded-lg bg-light-2 border-neutral-1" }, /* @__PURE__ */ e.createElement(a, { variant: "body4", className: "mb-2 text-light-2" }, /* @__PURE__ */ e.createElement(l, { className: "w-full h-7" })), /* @__PURE__ */ e.createElement("div", { className: "flex flex-wrap gap-1" }, /* @__PURE__ */ e.createElement(l, { className: "w-32 h-8 rounded-[24px]" }), /* @__PURE__ */ e.createElement(l, { className: "w-32 h-8 rounded-[24px]" })))) : u.length > 0 ? /* @__PURE__ */ e.createElement(
+    I,
+    {
+      insights: u
+    }
+  ) : null : null, d ? r ? /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(a, { variant: "body4", className: "mb-2 text-light-2" }, /* @__PURE__ */ e.createElement(l, { className: "w-28 h-7" })), /* @__PURE__ */ e.createElement("div", { className: "bg-light-2 p-1 border border-neutral-1 rounded-[8px]" }, /* @__PURE__ */ e.createElement("div", { className: "flex flex-wrap items-center justify-center gap-4" }, [...Array(4)].map((t, m) => /* @__PURE__ */ e.createElement(
+    l,
+    {
+      key: m,
+      className: "w-20 h-20 rounded-[8px]"
+    }
+  ))))) : d.length > 0 ? /* @__PURE__ */ e.createElement(R, { highlights: d }) : null : null, i && r ? /* @__PURE__ */ e.createElement("div", { className: "w-full bg-light-2 border border-neutral-1 p-3 rounded-[8px]" }, /* @__PURE__ */ e.createElement(a, { variant: "body4", className: "mb-4 text-light-2" }, /* @__PURE__ */ e.createElement(l, { className: "w-28 h-7" }), " "), /* @__PURE__ */ e.createElement(l, { className: "w-full h-[400px]" })) : i && i.length > 0 ? /* @__PURE__ */ e.createElement(P, { data: i }) : null, o && r ? /* @__PURE__ */ e.createElement("div", { className: "w-full bg-light-2 border border-neutral-1 p-3 rounded-[8px]" }, /* @__PURE__ */ e.createElement(a, { variant: "body4", className: "mb-4 text-light-2" }, /* @__PURE__ */ e.createElement(l, { className: "w-28 h-7" }), " "), /* @__PURE__ */ e.createElement(l, { className: "w-full h-[400px]" })) : o && o.length > 0 ? /* @__PURE__ */ e.createElement(q, { data: o }) : null, b ? /* @__PURE__ */ e.createElement("div", { className: "w-full" }, b) : null)), /* @__PURE__ */ e.createElement(
+    F,
+    {
+      onToggle: h,
+      isOpen: _,
+      data: n,
+      galleryActiveIndex: j,
+      setgalleryActiveIndex: g
+    }
+  ));
+};
 export {
-  n as Command,
-  E as CommandDialog,
-  g as CommandEmpty,
-  x as CommandGroup,
-  u as CommandInput,
-  N as CommandItem,
-  f as CommandList,
-  h as CommandSeparator,
-  y as CommandShortcut
+  Y as default
 };
 //# sourceMappingURL=index.es53.js.map

package/dist/index.es53.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es53.js","sources":["../src/components/unstyled/command/index.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { type DialogProps } from '@radix-ui/react-dialog'\nimport { Command as CommandPrimitive, useCommandState } from 'cmdk'\nimport { Search } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\nimport {\n  Dialog,\n  DialogContent,\n} from '@/components/organisms/dialog/dialog-components'\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\n      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',\n      className\n    )}\n    {...props}\n  />\n))\nCommand.displayName = CommandPrimitive.displayName\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <DialogContent className=\"p-0 overflow-hidden shadow-lg\">\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\ninterface CommandInputProps extends React.ComponentPropsWithoutRef<\n  typeof CommandPrimitive.Input\n> {\n  showIcon?: boolean\n}\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  CommandInputProps\n>(({ className, showIcon = true, ...props }, ref) => (\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n    {showIcon && <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />}\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    />\n  </div>\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}\n    {...props}\n  />\n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, ref) => {\n  const render = useCommandState((state) => state.filtered.count === 0)\n\n  if (!render) return null\n  //ISSUE REf https://github.com/shadcn-ui/ui/issues/1849\n  // CommandPrimitive.Empty is replaced with div\n  return (\n    <div\n      ref={ref}\n      className={cn('py-6 text-sm text-center', className)}\n      {...props}\n    />\n  )\n})\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={cn('-mx-1 h-px bg-border', className)}\n    {...props}\n  />\n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    disabled={props.disabled ?? false}\n    className={cn(\n      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-light-2 aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled=true]:opacity-50',\n      className\n    )}\n    {...props}\n  />\n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        'ml-auto text-xs tracking-widest text-muted-foreground',\n        className\n      )}\n      {...props}\n    />\n  )\n}\nCommandShortcut.displayName = 'CommandShortcut'\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n"],"names":["Command","React","className","props","ref","CommandPrimitive","cn","CommandDialog","children","Dialog","DialogContent","CommandInput","showIcon","Search","CommandList","CommandEmpty","useCommandState","state","CommandGroup","CommandSeparator","CommandItem","CommandShortcut"],"mappings":"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"}
+{"version":3,"file":"index.es53.js","sources":["../src/components/ui/report-snippet-view/report-snippet-view.tsx"],"sourcesContent":["import React, { FC, Key, useState } from 'react'\nimport { ReportSnippetViewNS } from './report-snippet-view.types'\nimport { Typography } from '@/components/atoms/typography'\nimport { Badge } from '@/components/atoms/badge'\nimport { StarScore } from '../star-score'\nimport { Button } from '@/components/atoms/button'\nimport { Skeleton } from '@/components/atoms/skeleton'\n\nimport {\n  ReportSnippetGalleryView,\n  StoreOverviewSection,\n  FootfallChartSection,\n  CannibalisationChartSection,\n  StoreInsightsSection,\n} from './report-snippet-view-components'\n\nconst ReportSnippetView: FC<ReportSnippetViewNS.ReportSnippetViewProps> = ({\n  map,\n  title,\n  subTitle,\n  tag,\n  score,\n  searched_on,\n  streetViewData,\n  highlights,\n  isStreetViewDataLoading,\n  handleStreetViewClick,\n  storeHighlights,\n  isLoading,\n  catchmentInsights,\n  footfallChartData,\n  cannibalisationChartData,\n  customModelSection,\n  customSection,\n  // customButton,\n}) => {\n  const [galleryOpen, setGalleryOpen] = useState(false)\n  const [galleryActiveIndex, setgalleryActiveIndex] = React.useState(0)\n\n  const searchedOnDate = new Date(Number(searched_on) * 1000) // Convert timestamp to milliseconds\n  const formattedDate = searchedOnDate.toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  })\n\n  // Check if all images have null values for image_url\n  const allImagesNull = streetViewData?.every(\n    (img: { image_url: string | null }) => img.image_url === null\n  )\n\n  const toggleGallery = () => {\n    setGalleryOpen((prev) => !prev)\n  }\n\n  return (\n    <div className=\"flex flex-col h-full min-h-0\">\n      {/* Fixed at top: map – does not scroll */}\n      {map ? (\n        <div className=\"flex-shrink-0\">\n          {isLoading ? (\n            <div className=\"flex flex-row-reverse items-center justify-between w-full p-1\">\n              <Skeleton className=\"w-full h-40 \" />\n            </div>\n          ) : (\n            <div className=\"h-[200px]\">{map}</div>\n          )}\n        </div>\n      ) : null}\n\n      {/* Fixed below map: title + score – does not scroll */}\n      <div className=\"flex-shrink-0\">\n        <div className=\"flex flex-col gap-1 p-3\">\n          {isLoading ? (\n            <Skeleton className=\"w-full h-8 \" />\n          ) : (\n            <Typography variant={'h3'}>{title}</Typography>\n          )}\n          {isLoading ? (\n            <div className=\"flex flex-row-reverse items-center justify-between w-full\">\n              <Skeleton className=\"w-20 h-5 \" />\n              <Skeleton className=\"w-32 h-5 \" />\n            </div>\n          ) : (\n            <div className=\"flex flex-row-reverse items-center justify-between w-full \">\n              {tag ? (\n                <Badge variant=\"neutral\" size={'sm'} showBorder={true}>\n                  {tag}\n                </Badge>\n              ) : (\n                <div></div>\n              )}\n              {subTitle !== undefined && (\n                <Typography\n                  variant={'body4'}\n                  className=\"w-1/2 text-light-4 fit-content\"\n                >\n                  {subTitle}\n                </Typography>\n              )}\n            </div>\n          )}\n        </div>\n        <div className=\"w-full p-3 border-b border-neutral-1\">\n          {isLoading ? (\n            <div className=\"flex flex-row-reverse items-center justify-between w-full\">\n              <Skeleton className=\"h-6 w-[120px]\" />\n              <Skeleton className=\"h-6 w-[120px]\" />\n            </div>\n          ) : (\n            <div className=\"flex flex-row items-center justify-between\">\n              {score?.value && (\n                <div className=\"flex items-center justify-between gap-1\">\n                  <StarScore\n                    score={score.value}\n                    starGap={1}\n                    starSize={24}\n                    isLoading={isLoading || score?.isLoading}\n                  />\n                  {!score.isLoading && (\n                    <Typography variant={'body5'} className=\"text-light-3\">\n                      ({score.value}%)\n                    </Typography>\n                  )}\n                </div>\n              )}\n              {searched_on && (\n                <Badge\n                  variant={'default'}\n                  size={'sm'}\n                  showBorder={true}\n                >{`Added on: ${formattedDate}`}</Badge>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Scrollable: only this area scrolls when content exceeds height */}\n      <div className=\"flex-1 min-h-0 overflow-y-auto flex flex-col\">\n        {customModelSection ? (\n          <div className=\"p-3\">{customModelSection}</div>\n        ) : null}\n        <div>\n          {highlights && isLoading ? (\n            <div className=\"flex flex-col gap-3 p-3\">\n              <div>\n                <Typography variant=\"body6\" className=\"text-light-2\">\n                  <Skeleton className=\"w-28 h-7\" />{' '}\n                </Typography>\n              </div>\n              <div className=\"flex flex-row flex-wrap gap-2\">\n                {[...Array(6)].map((_, index) => (\n                  <Skeleton key={index} className=\"w-28 h-7\" />\n                ))}\n              </div>\n            </div>\n          ) : highlights && highlights.length > 0 ? (\n            <div className=\"flex flex-col gap-3 p-3\">\n              <div>\n                <Typography variant=\"body6\" className=\"text-light-2\">\n                  Location Highlights\n                </Typography>\n              </div>\n              <div className=\"flex flex-row flex-wrap gap-2\">\n                {highlights.map((highlight, index) => (\n                  <Badge\n                    key={index}\n                    variant={highlight.variant}\n                    showBorder={true}\n                    className=\"normal-case\"\n                  >\n                    {highlight.name}\n                  </Badge>\n                ))}\n              </div>\n            </div>\n          ) : null}\n        </div>\n\n        {streetViewData !== undefined && (\n          <div className=\"z-10 flex flex-col items-start justify-between p-3 pb-0 gap-1\">\n            {streetViewData === null && isStreetViewDataLoading === false ? (\n              <div className=\"w-fit\">\n                <Button\n                  variant=\"secondary\"\n                  size=\"sm\"\n                  className=\"flex gap-2 px-4 py-2 focus:ring-0\"\n                  onClick={handleStreetViewClick}\n                >\n                  <img\n                    src=\"https://frontend-static-files.geoiq.io/strapi/download_cloud_7761a0bc2a.svg\"\n                    height={16}\n                    width={16}\n                    alt={'download-btn'}\n                  />\n                  Street-view Photos\n                </Button>\n              </div>\n            ) : (\n              <Typography variant=\"body6\" className=\"text-light-2\">\n                Street-view Photos\n              </Typography>\n            )}\n\n            <div\n              id={'street'}\n              className=\"flex flex-row max-w-full gap-2 overflow-x-scroll\"\n              style={{ scrollbarWidth: 'none' }}\n            >\n              {isStreetViewDataLoading ? (\n                [...Array(4)].map((_, index) => (\n                  <Skeleton\n                    key={index}\n                    className=\"rounded-lg min-h-[160px] min-w-[120px]\"\n                  />\n                ))\n              ) : allImagesNull ? (\n                <Typography variant=\"body1\">No Images Available</Typography>\n              ) : (\n                streetViewData &&\n                streetViewData?.map(\n                  (\n                    img: { image_url: string | null },\n                    index: Key | null | undefined\n                  ) => (\n                    <div\n                      key={index}\n                      className=\"relative min-h-[160px] min-w-[120px]\"\n                    >\n                      <div className=\"inline\">\n                        {img?.image_url && img?.image_url !== null ? (\n                          <img\n                            src={img?.image_url}\n                            alt=\"map_img\"\n                            className=\"object-cover w-full h-full rounded-lg cursor-pointer\"\n                            role=\"button\"\n                            tabIndex={0}\n                            onClick={() => {\n                              setgalleryActiveIndex(Number(index))\n                              toggleGallery()\n                            }}\n                          />\n                        ) : null}\n                      </div>\n                    </div>\n                  )\n                )\n              )}\n            </div>\n          </div>\n        )}\n        <div className=\"flex flex-col gap-3 p-3\">\n          {/* --------------Store Insight -----------------*/}\n          {catchmentInsights ? (\n            isLoading ? (\n              <div>\n                <div className=\"flex mb-4\">\n                  <Typography variant=\"body4\" className=\"text-light-2\">\n                    <Skeleton className=\"w-28 h-7\" />\n                  </Typography>\n                </div>\n\n                <div className=\"p-3 border rounded-lg bg-light-2 border-neutral-1\">\n                  <Typography variant=\"body4\" className=\"mb-2 text-light-2\">\n                    <Skeleton className=\"w-full h-7\" />\n                  </Typography>\n\n                  {/* Skeleton loaders */}\n                  <div className=\"flex flex-wrap gap-1\">\n                    <Skeleton className=\"w-32 h-8 rounded-[24px]\" />\n                    <Skeleton className=\"w-32 h-8 rounded-[24px]\" />\n                  </div>\n                </div>\n              </div>\n            ) : catchmentInsights.length > 0 ? (\n              <StoreInsightsSection\n                insights={catchmentInsights}\n                // customButton={customButton}\n              />\n            ) : null\n          ) : null}\n\n          {/* --------------Store Overview -----------------*/}\n          {storeHighlights ? (\n            isLoading ? (\n              <div>\n                <Typography variant=\"body4\" className=\"mb-2 text-light-2\">\n                  <Skeleton className=\"w-28 h-7\" />\n                </Typography>\n                <div className=\"bg-light-2 p-1 border border-neutral-1 rounded-[8px]\">\n                  <div className=\"flex flex-wrap items-center justify-center gap-4\">\n                    {[...Array(4)].map((_, index) => (\n                      <Skeleton\n                        key={index}\n                        className=\"w-20 h-20 rounded-[8px]\"\n                      />\n                    ))}\n                  </div>\n                </div>\n              </div>\n            ) : storeHighlights.length > 0 ? (\n              <StoreOverviewSection highlights={storeHighlights} />\n            ) : null\n          ) : null}\n\n          {/*----------------- Footfall Trends ------------------*/}\n          {footfallChartData && isLoading ? (\n            <div className=\"w-full bg-light-2 border border-neutral-1 p-3 rounded-[8px]\">\n              <Typography variant={'body4'} className=\"mb-4 text-light-2\">\n                <Skeleton className=\"w-28 h-7\" />{' '}\n              </Typography>\n              <Skeleton className=\"w-full h-[400px]\" />\n            </div>\n          ) : footfallChartData && footfallChartData.length > 0 ? (\n            <FootfallChartSection data={footfallChartData} />\n          ) : null}\n\n          {/* -----------------Cannibalisation Effect------------------ */}\n          {cannibalisationChartData && isLoading ? (\n            <div className=\"w-full bg-light-2 border border-neutral-1 p-3 rounded-[8px]\">\n              <Typography variant={'body4'} className=\"mb-4 text-light-2\">\n                <Skeleton className=\"w-28 h-7\" />{' '}\n              </Typography>\n              <Skeleton className=\"w-full h-[400px]\" />\n            </div>\n          ) : cannibalisationChartData &&\n            cannibalisationChartData.length > 0 ? (\n            <CannibalisationChartSection data={cannibalisationChartData} />\n          ) : null}\n\n          {/* Custom section – show anything extra at the end */}\n          {customSection ? <div className=\"w-full\">{customSection}</div> : null}\n        </div>\n      </div>\n      <ReportSnippetGalleryView\n        onToggle={toggleGallery}\n        isOpen={galleryOpen}\n        data={streetViewData}\n        galleryActiveIndex={galleryActiveIndex}\n        setgalleryActiveIndex={setgalleryActiveIndex}\n      />\n    </div>\n  )\n}\n\nexport default ReportSnippetView\n"],"names":["ReportSnippetView","map","title","subTitle","tag","score","searched_on","streetViewData","highlights","isStreetViewDataLoading","handleStreetViewClick","storeHighlights","isLoading","catchmentInsights","footfallChartData","cannibalisationChartData","customModelSection","customSection","galleryOpen","setGalleryOpen","useState","galleryActiveIndex","setgalleryActiveIndex","React","formattedDate","allImagesNull","img","toggleGallery","prev","Skeleton","Typography","Badge","StarScore","_","index","highlight","Button","StoreInsightsSection","StoreOverviewSection","FootfallChartSection","CannibalisationChartSection","ReportSnippetGalleryView"],"mappings":";;;;;;;AAgBA,MAAMA,IAAoE,CAAC;AAAA,EACzE,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,0BAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,eAAAC;AAAA;AAEF,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9C,CAACC,GAAoBC,CAAqB,IAAIC,EAAM,SAAS,CAAC,GAG9DC,IADiB,IAAI,KAAK,OAAOlB,CAAW,IAAI,GAAI,EACrB,mBAAmB,SAAS;AAAA,IAC/D,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,EAAA,CACN,GAGKmB,IAAgBlB,GAAgB;AAAA,IACpC,CAACmB,MAAsCA,EAAI,cAAc;AAAA,EAAA,GAGrDC,IAAgB,MAAM;AAC1B,IAAAR,EAAe,CAACS,MAAS,CAACA,CAAI;AAAA,EAChC;AAEA,yCACG,OAAA,EAAI,WAAU,+BAAA,GAEZ3B,oCACE,OAAA,EAAI,WAAU,gBAAA,GACZW,oCACE,OAAA,EAAI,WAAU,mEACbW,gBAAAA,EAAA,cAACM,GAAA,EAAS,WAAU,eAAA,CAAe,CACrC,IAEAN,gBAAAA,EAAA,cAAC,SAAI,WAAU,YAAA,GAAatB,CAAI,CAEpC,IACE,MAGJsB,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,gBAAA,mCACZ,OAAA,EAAI,WAAU,6BACZX,IACCW,gBAAAA,EAAA,cAACM,KAAS,WAAU,cAAA,CAAc,IAElCN,gBAAAA,EAAA,cAACO,KAAW,SAAS,KAAA,GAAO5B,CAAM,GAEnCU,oCACE,OAAA,EAAI,WAAU,4DAAA,GACbW,gBAAAA,EAAA,cAACM,KAAS,WAAU,YAAA,CAAY,GAChCN,gBAAAA,EAAA,cAACM,GAAA,EAAS,WAAU,YAAA,CAAY,CAClC,IAEAN,gBAAAA,EAAA,cAAC,SAAI,WAAU,6DAAA,GACZnB,IACCmB,gBAAAA,EAAA,cAACQ,GAAA,EAAM,SAAQ,WAAU,MAAM,MAAM,YAAY,MAC9C3B,CACH,oCAEC,OAAA,IAAI,GAEND,MAAa,UACZoB,gBAAAA,EAAA;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAU;AAAA,IAAA;AAAA,IAET3B;AAAA,EAAA,CAGP,CAEJ,GACAoB,gBAAAA,EAAA,cAAC,SAAI,WAAU,uCAAA,GACZX,IACCW,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,4DAAA,GACbA,gBAAAA,EAAA,cAACM,KAAS,WAAU,gBAAA,CAAgB,GACpCN,gBAAAA,EAAA,cAACM,GAAA,EAAS,WAAU,gBAAA,CAAgB,CACtC,IAEAN,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,6CAAA,GACZlB,GAAO,SACNkB,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,6CACbA,gBAAAA,EAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,OAAO3B,EAAM;AAAA,MACb,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAWO,KAAaP,GAAO;AAAA,IAAA;AAAA,EAAA,GAEhC,CAACA,EAAM,aACNkB,gBAAAA,EAAA,cAACO,KAAW,SAAS,SAAS,WAAU,kBAAe,KACnDzB,EAAM,OAAM,IAChB,CAEJ,GAEDC,KACCiB,gBAAAA,EAAA;AAAA,IAACQ;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT,MAAM;AAAA,MACN,YAAY;AAAA,IAAA;AAAA,IACZ,aAAaP,CAAa;AAAA,EAAA,CAEhC,CAEJ,CACF,GAGAD,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,+CAAA,GACZP,oCACE,OAAA,EAAI,WAAU,SAAOA,CAAmB,IACvC,MACJO,gBAAAA,EAAA,cAAC,OAAA,MACEf,KAAcI,IACbW,gBAAAA,EAAA,cAAC,SAAI,WAAU,0BAAA,mCACZ,OAAA,MACCA,gBAAAA,EAAA,cAACO,KAAW,SAAQ,SAAQ,WAAU,kBACpCP,gBAAAA,EAAA,cAACM,KAAS,WAAU,WAAA,CAAW,GAAG,GACpC,CACF,GACAN,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,gCAAA,GACZ,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAACU,GAAGC,sCACpBL,GAAA,EAAS,KAAKK,GAAO,WAAU,WAAA,CAAW,CAC5C,CACH,CACF,IACE1B,KAAcA,EAAW,SAAS,IACpCe,gBAAAA,EAAA,cAAC,SAAI,WAAU,0BAAA,mCACZ,OAAA,MACCA,gBAAAA,EAAA,cAACO,KAAW,SAAQ,SAAQ,WAAU,eAAA,GAAe,qBAErD,CACF,GACAP,gBAAAA,EAAA,cAAC,SAAI,WAAU,gCAAA,GACZf,EAAW,IAAI,CAAC2B,GAAWD,MAC1BX,gBAAAA,EAAA;AAAA,IAACQ;AAAA,IAAA;AAAA,MACC,KAAKG;AAAA,MACL,SAASC,EAAU;AAAA,MACnB,YAAY;AAAA,MACZ,WAAU;AAAA,IAAA;AAAA,IAETA,EAAU;AAAA,EAAA,CAEd,CACH,CACF,IACE,IACN,GAEC5B,MAAmB,UAClBgB,gBAAAA,EAAA,cAAC,SAAI,WAAU,gEAAA,GACZhB,MAAmB,QAAQE,MAA4B,KACtDc,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,QAAA,GACbA,gBAAAA,EAAA;AAAA,IAACa;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAAS1B;AAAA,IAAA;AAAA,IAETa,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAI;AAAA,QACJ,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IACL;AAAA,EAAA,CAGN,IAEAA,gBAAAA,EAAA,cAACO,GAAA,EAAW,SAAQ,SAAQ,WAAU,eAAA,GAAe,oBAErD,GAGFP,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,OAAO,EAAE,gBAAgB,OAAA;AAAA,IAAO;AAAA,IAE/Bd,IACC,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAACwB,GAAGC,MACpBX,gBAAAA,EAAA;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,KAAKK;AAAA,QACL,WAAU;AAAA,MAAA;AAAA,IAAA,CAEb,IACCT,IACFF,gBAAAA,EAAA,cAACO,GAAA,EAAW,SAAQ,QAAA,GAAQ,qBAAmB,IAE/CvB,KACAA,GAAgB;AAAA,MACd,CACEmB,GACAQ,MAEAX,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKW;AAAA,UACL,WAAU;AAAA,QAAA;AAAA,QAEVX,gBAAAA,EAAA,cAAC,SAAI,WAAU,SAAA,GACZG,GAAK,aAAaA,GAAK,cAAc,OACpCH,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKG,GAAK;AAAA,YACV,KAAI;AAAA,YACJ,WAAU;AAAA,YACV,MAAK;AAAA,YACL,UAAU;AAAA,YACV,SAAS,MAAM;AACb,cAAAJ,EAAsB,OAAOY,CAAK,CAAC,GACnCP,EAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA,IAEA,IACN;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,CAGN,GAEFJ,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,0BAAA,GAEZV,IACCD,IACEW,gBAAAA,EAAA,cAAC,OAAA,MACCA,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,eACbA,gBAAAA,EAAA,cAACO,GAAA,EAAW,SAAQ,SAAQ,WAAU,eAAA,GACpCP,gBAAAA,EAAA,cAACM,GAAA,EAAS,WAAU,WAAA,CAAW,CACjC,CACF,GAEAN,gBAAAA,EAAA,cAAC,SAAI,WAAU,oDAAA,GACbA,gBAAAA,EAAA,cAACO,GAAA,EAAW,SAAQ,SAAQ,WAAU,oBAAA,GACpCP,gBAAAA,EAAA,cAACM,GAAA,EAAS,WAAU,cAAa,CACnC,GAGAN,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,uBAAA,GACbA,gBAAAA,EAAA,cAACM,GAAA,EAAS,WAAU,2BAA0B,GAC9CN,gBAAAA,EAAA,cAACM,GAAA,EAAS,WAAU,0BAAA,CAA0B,CAChD,CACF,CACF,IACEhB,EAAkB,SAAS,IAC7BU,gBAAAA,EAAA;AAAA,IAACc;AAAA,IAAA;AAAA,MACC,UAAUxB;AAAA,IAAA;AAAA,EAAA,IAGV,OACF,MAGHF,IACCC,oCACG,OAAA,MACCW,gBAAAA,EAAA,cAACO,GAAA,EAAW,SAAQ,SAAQ,WAAU,oBAAA,GACpCP,gBAAAA,EAAA,cAACM,GAAA,EAAS,WAAU,WAAA,CAAW,CACjC,GACAN,gBAAAA,EAAA,cAAC,SAAI,WAAU,uDAAA,GACbA,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,sDACZ,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAACU,GAAGC,MACrBX,gBAAAA,EAAA;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,KAAKK;AAAA,MACL,WAAU;AAAA,IAAA;AAAA,EAAA,CAEb,CACH,CACF,CACF,IACEvB,EAAgB,SAAS,IAC3BY,gBAAAA,EAAA,cAACe,GAAA,EAAqB,YAAY3B,EAAA,CAAiB,IACjD,OACF,MAGHG,KAAqBF,IACpBW,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,8DAAA,GACbA,gBAAAA,EAAA,cAACO,KAAW,SAAS,SAAS,WAAU,oBAAA,GACtCP,gBAAAA,EAAA,cAACM,KAAS,WAAU,WAAA,CAAW,GAAG,GACpC,mCACCA,GAAA,EAAS,WAAU,oBAAmB,CACzC,IACEf,KAAqBA,EAAkB,SAAS,IAClDS,gBAAAA,EAAA,cAACgB,GAAA,EAAqB,MAAMzB,GAAmB,IAC7C,MAGHC,KAA4BH,IAC3BW,gBAAAA,EAAA,cAAC,SAAI,WAAU,8DAAA,mCACZO,GAAA,EAAW,SAAS,SAAS,WAAU,oBAAA,mCACrCD,GAAA,EAAS,WAAU,YAAW,GAAG,GACpC,GACAN,gBAAAA,EAAA,cAACM,GAAA,EAAS,WAAU,mBAAA,CAAmB,CACzC,IACEd,KACFA,EAAyB,SAAS,IAClCQ,gBAAAA,EAAA,cAACiB,KAA4B,MAAMzB,EAAA,CAA0B,IAC3D,MAGHE,oCAAiB,OAAA,EAAI,WAAU,YAAUA,CAAc,IAAS,IACnE,CACF,GACAM,gBAAAA,EAAA;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,UAAUd;AAAA,MACV,QAAQT;AAAA,MACR,MAAMX;AAAA,MACN,oBAAAc;AAAA,MACA,uBAAAC;AAAA,IAAA;AAAA,EAAA,CAEJ;AAEJ;"}

package/dist/index.es54.js

@@ -1,14 +1,126 @@
-import { HoverCard as m, HoverCardTrigger as n, HoverCardContent as l } from "./index.es55.js";
-import e from "react";
-function i({
-  trigger: r,
-  content: t,
-  triggerProps: a,
-  contentProps: o
-}) {
-  return /* @__PURE__ */ e.createElement(m, null, /* @__PURE__ */ e.createElement(n, { asChild: !0, ...a }, r), /* @__PURE__ */ e.createElement(l, { className: "bg-white", ...o }, t));
-}
+import * as e from "react";
+import { cn as i } from "./index.es89.js";
+import { AnimatedInputContainerVariants as F, AnimatedInputStyles as w, DynamicComponentStyles as y } from "./index.es104.js";
+import { Typography as A } from "./index.es19.js";
+import { XCircle as R } from "lucide-react";
+const b = e.forwardRef(
+  ({
+    className: h,
+    type: v,
+    isError: m,
+    message: f,
+    prefix: p,
+    suffix: c,
+    id: E,
+    placeholder: o = "",
+    placeholders: n = [],
+    value: l = "",
+    onChange: g,
+    ...I
+  }, N) => {
+    const S = e.useRef(null), $ = N || S, [a, r] = e.useState(!1), [s, k] = e.useState(0), [t, d] = e.useState(!1);
+    e.useEffect(() => {
+      if (n.length === 0 || a || l.toString().length > 0)
+        return;
+      const u = setInterval(() => {
+        d(!1), k((C) => (C + 1) % n.length), d(!0);
+      }, 2e3);
+      return () => clearInterval(u);
+    }, [n.length, a, l]);
+    const x = () => {
+      g?.({
+        target: { value: "" }
+      });
+    };
+    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: i(
+          F({
+            isError: m,
+            isFocused: a,
+            disabled: I.disabled,
+            className: h
+          })
+        ),
+        id: E,
+        style: { overflow: "hidden" }
+      },
+      p && /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          onClick: () => {
+            r(!0);
+          }
+        },
+        p
+      ),
+      /* @__PURE__ */ e.createElement("div", { className: "h-[38px] w-full relative " }, /* @__PURE__ */ e.createElement(
+        "input",
+        {
+          type: v,
+          className: i(w({ isError: m })),
+          placeholder: a ? "What are you searching for?" : o,
+          onFocus: () => {
+            r(!0), d(!1);
+          },
+          onBlur: () => r(!1),
+          ref: $,
+          value: l,
+          onChange: (u) => g?.(u)
+        }
+      ), !a && l.toString().length === 0 && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          key: `placeholder-${s}-${t}`,
+          className: i(y({ animate: t })),
+          style: {
+            left: `${o.length * 0.92}ch`,
+            animation: t ? "animatedInputMiddleToTop 0.6s forwards" : "none",
+            opacity: t ? 1 : 0
+          }
+        },
+        n[s]
+      ), /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          key: `next-placeholder-${(s + 1) % n.length}-${t}`,
+          className: i(y({ animate: t })),
+          style: {
+            left: `${o.length * 0.92}ch`,
+            animation: t ? "animatedInputFadeInBottom 1.5s forwards 0.2s" : "none",
+            opacity: t ? 0 : 1
+          }
+        },
+        n[(s + 1) % n.length]
+      ))),
+      /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          className: "flex items-center cursor-pointer",
+          onClick: () => c && r(!0)
+        },
+        c ? /* @__PURE__ */ e.createElement("div", { className: "flex items-center" }, c) : /* @__PURE__ */ e.createElement(
+          "div",
+          {
+            className: a ? "" : "opacity-0",
+            onClick: x
+          },
+          /* @__PURE__ */ e.createElement(R, { size: 16, className: "stroke-light-2" })
+        )
+      )
+    ), f && /* @__PURE__ */ e.createElement(
+      A,
+      {
+        variant: "body2",
+        className: `${m ? "text-danger-1" : "text-light-3"} mt-1.5`
+      },
+      f
+    ));
+  }
+);
+b.displayName = "AnimatedInput";
 export {
-  i as HoverCardDemo
+  b as AnimatedInput
 };
 //# sourceMappingURL=index.es54.js.map

package/dist/index.es54.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es54.js","sources":["../src/components/unstyled/hover-card/hover-card.tsx"],"sourcesContent":["import {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from './hover-card-components'\nimport { HoverCardProps } from './hover-card.types'\nimport React from 'react'\n\nexport function HoverCardDemo({\n  trigger,\n  content,\n  triggerProps,\n  contentProps,\n}: HoverCardProps) {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild {...triggerProps}>\n        {trigger}\n        {/* <Button variant=\"outline\">Open popover</Button> */}\n      </HoverCardTrigger>\n      <HoverCardContent className=\"bg-white\" {...contentProps}>\n        {content}\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n"],"names":["HoverCardDemo","trigger","content","triggerProps","contentProps","HoverCard","React","HoverCardTrigger","HoverCardContent"],"mappings":";;AAQO,SAASA,EAAc;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AACF,GAAmB;AACjB,yCACGC,GAAA,MACCC,gBAAAA,EAAA,cAACC,GAAA,EAAiB,SAAO,IAAE,GAAGJ,KAC3BF,CAEH,mCACCO,GAAA,EAAiB,WAAU,YAAY,GAAGJ,KACxCF,CACH,CACF;AAEJ;"}
+{"version":3,"file":"index.es54.js","sources":["../src/components/ui/animated-input/animated-input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '@/lib/utils'\nimport { AnimatedInputProps } from './animated-input.types'\nimport {\n  AnimatedInputContainerVariants,\n  DynamicComponentStyles,\n  AnimatedInputStyles,\n} from './animated-input.styles'\nimport { Typography } from '../../atoms/typography'\nimport { XCircle } from 'lucide-react'\n\nconst AnimatedInput = React.forwardRef<HTMLInputElement, AnimatedInputProps>(\n  (\n    {\n      className,\n      type,\n      isError,\n      message,\n      prefix,\n      suffix,\n      id,\n      placeholder = '',\n      placeholders = [],\n      value = '',\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const combinedRef = (ref as React.RefObject<HTMLInputElement>) || inputRef\n    const [isFocused, setIsFocused] = React.useState(false)\n    const [index, setIndex] = React.useState(0)\n    const [animate, setAnimate] = React.useState(false)\n\n    React.useEffect(() => {\n      if (placeholders.length === 0 || isFocused || value.toString().length > 0)\n        return\n\n      const interval = setInterval(() => {\n        setAnimate(false)\n        setIndex((prevIndex) => (prevIndex + 1) % placeholders.length)\n        setAnimate(true)\n      }, 2000)\n\n      return () => clearInterval(interval)\n    }, [placeholders.length, isFocused, value])\n\n    const clearInput = () => {\n      onChange?.({\n        target: { value: '' },\n      } as React.ChangeEvent<HTMLInputElement>)\n    }\n\n    return (\n      <>\n        <div\n          className={cn(\n            AnimatedInputContainerVariants({\n              isError,\n              isFocused,\n              disabled: props.disabled,\n              className,\n            })\n          )}\n          id={id}\n          style={{ overflow: 'hidden' }}\n        >\n          {prefix && (\n            <div\n              onClick={() => {\n                setIsFocused(true)\n              }}\n            >\n              {prefix}\n            </div>\n          )}\n\n          <div className=\"h-[38px] w-full relative \">\n            <input\n              type={type}\n              className={cn(AnimatedInputStyles({ isError }))}\n              placeholder={\n                isFocused ? 'What are you searching for?' : placeholder\n              }\n              onFocus={() => {\n                setIsFocused(true)\n                setAnimate(false)\n              }}\n              onBlur={() => setIsFocused(false)}\n              ref={combinedRef}\n              value={value}\n              onChange={(e) => onChange?.(e)}\n            />\n\n            {/* Dynamic placeholder animation shown when input is not focused and empty */}\n            {!isFocused && value.toString().length === 0 && (\n              <>\n                <div\n                  key={`placeholder-${index}-${animate}`}\n                  className={cn(DynamicComponentStyles({ animate }))}\n                  style={{\n                    left: `${placeholder.length * 0.92}ch`,\n                    animation: animate\n                      ? 'animatedInputMiddleToTop 0.6s forwards'\n                      : 'none',\n                    opacity: animate ? 1 : 0,\n                  }}\n                >\n                  {placeholders[index]}\n                </div>\n\n                <div\n                  key={`next-placeholder-${(index + 1) % placeholders.length}-${animate}`}\n                  className={cn(DynamicComponentStyles({ animate }))}\n                  style={{\n                    left: `${placeholder.length * 0.92}ch`,\n                    animation: animate\n                      ? 'animatedInputFadeInBottom 1.5s forwards 0.2s'\n                      : 'none',\n                    opacity: animate ? 0 : 1,\n                  }}\n                >\n                  {placeholders[(index + 1) % placeholders.length]}\n                </div>\n              </>\n            )}\n          </div>\n\n          {/* Optional suffix element (or clear button) displayed after input */}\n          <div\n            className=\"flex items-center cursor-pointer\"\n            onClick={() => suffix && setIsFocused(true)}\n          >\n            {suffix ? (\n              <div className=\"flex items-center\">{suffix}</div>\n            ) : (\n              <div\n                className={!isFocused ? 'opacity-0' : ''}\n                onClick={clearInput}\n              >\n                <XCircle size={16} className=\"stroke-light-2\" />\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* Optional message displayed below the input */}\n        {message && (\n          <Typography\n            variant=\"body2\"\n            className={`${isError ? 'text-danger-1' : 'text-light-3'} mt-1.5`}\n          >\n            {message}\n          </Typography>\n        )}\n      </>\n    )\n  }\n)\n\nAnimatedInput.displayName = 'AnimatedInput'\n\nexport { AnimatedInput }\n"],"names":["AnimatedInput","React","className","type","isError","message","prefix","suffix","id","placeholder","placeholders","value","onChange","props","ref","inputRef","combinedRef","isFocused","setIsFocused","index","setIndex","animate","setAnimate","interval","prevIndex","clearInput","cn","AnimatedInputContainerVariants","AnimatedInputStyles","e","DynamicComponentStyles","XCircle","Typography"],"mappings":"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"}

package/dist/index.es55.js

@@ -1,23 +1,108 @@
 import * as e from "react";
-import * as t from "@radix-ui/react-hover-card";
-import { cn as n } from "./index.es81.js";
-const p = t.Root, f = t.Trigger, s = e.forwardRef(({ className: o, align: a = "center", sideOffset: d = 4, ...r }, i) => /* @__PURE__ */ e.createElement(
-  t.Content,
-  {
-    ref: i,
-    align: a,
-    sideOffset: d,
-    className: n(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      o
-    ),
-    ...r
+import { Clock as E } from "lucide-react";
+import { cn as u } from "./index.es89.js";
+import { Typography as a } from "./index.es19.js";
+import b from "./index.es18.js";
+import { CreditsPillVariants as x, CreditsIndicatorVariants as N } from "./index.es77.js";
+function C(t) {
+  return t >= 1e6 ? `${parseFloat((t / 1e6).toFixed(2))}M` : t >= 1e3 ? `${parseFloat((t / 1e3).toFixed(2))}k` : String(t);
+}
+const $ = e.forwardRef(
+  ({
+    remaining: t,
+    total: v,
+    collapsed: y = !1,
+    label: s = "Credits",
+    topUpLabel: p = "Top up",
+    onTopUp: l,
+    topUpWrapper: o,
+    size: c,
+    className: m,
+    id: d,
+    ...f
+  }, g) => {
+    const r = Math.max(v, 0), i = Math.min(Math.max(t, 0), r), h = r === 0 ? 0 : i / r * 100, w = `${i.toLocaleString()} / ${r.toLocaleString()} ${s.toLowerCase()}`;
+    if (y) {
+      const n = /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          ref: g,
+          id: d,
+          className: u(x({ size: c }), m),
+          ...f
+        },
+        /* @__PURE__ */ e.createElement(E, { className: "w-3.5 h-3.5 text-[rgb(var(--primary-300))]" }),
+        /* @__PURE__ */ e.createElement(a, { variant: "body1", className: "text-white fleading-none" }, C(i)),
+        /* @__PURE__ */ e.createElement("div", { className: "w-full h-1 overflow-hidden rounded bg-white/15" }, /* @__PURE__ */ e.createElement(
+          "div",
+          {
+            className: "h-full transition-all duration-300 ease-in-out rounded brand-primary-secondary-gradient",
+            style: { width: `${h}%` }
+          }
+        ))
+      );
+      return /* @__PURE__ */ e.createElement(
+        b,
+        {
+          content: "",
+          headerText: w,
+          side: "right",
+          sideOffset: 12,
+          delayDuration: 100,
+          triggerElement: n
+        }
+      );
+    }
+    return /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        ref: g,
+        id: d,
+        className: u(N({ size: c }), m),
+        ...f
+      },
+      /* @__PURE__ */ e.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ e.createElement(
+        a,
+        {
+          variant: "body6",
+          className: "font-semibold tracking-wider text-white/50"
+        },
+        s
+      ), (l || o) && (() => {
+        const n = /* @__PURE__ */ e.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: l,
+            className: "inline-flex items-center gap-0.5 text-[rgb(var(--primary-400))] hover:text-[rgb(var(--primary-200))] transition-colors"
+          },
+          /* @__PURE__ */ e.createElement(a, { variant: "body6", className: "font-semibold" }, p),
+          /* @__PURE__ */ e.createElement(
+            "img",
+            {
+              src: "https://frontend-static-files.geoiq.io/strapi/icons_v5_61a46c180e/icons_v5_61a46c180e.svg",
+              alt: "",
+              className: "w-3 h-3"
+            }
+          )
+        );
+        return o ? o(n) : n;
+      })()),
+      /* @__PURE__ */ e.createElement("div", { className: "flex items-baseline gap-1" }, /* @__PURE__ */ e.createElement(a, { variant: "body1", className: "text-white " }, i.toLocaleString()), /* @__PURE__ */ e.createElement(a, { variant: "body1", className: "text-white " }, "remaining"), /* @__PURE__ */ e.createElement(a, { variant: "body6", className: "text-white/40" }, "/ ", r.toLocaleString())),
+      /* @__PURE__ */ e.createElement("div", { className: "w-full h-1 overflow-hidden rounded bg-white/10" }, /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          className: "h-full transition-all duration-300 ease-in-out rounded brand-primary-secondary-gradient",
+          style: { width: `${h}%` }
+        }
+      ))
+    );
   }
-));
-s.displayName = t.Content.displayName;
+);
+$.displayName = "CreditsIndicator";
 export {
-  p as HoverCard,
-  s as HoverCardContent,
-  f as HoverCardTrigger
+  $ as CreditsIndicator,
+  N as CreditsIndicatorVariants,
+  x as CreditsPillVariants
 };
 //# sourceMappingURL=index.es55.js.map