@greatapps/common 1.1.429 → 1.1.430

package/dist/components/ui/data-display/CardItem.mjs

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconDotsVertical, IconTrash } from "@tabler/icons-react";
+import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
+import { NavBarItem } from "../../layouts/NavBarItem";
+import { CardBrandIcon } from "./CardBrandIcons";
+function CardItem({
+  card,
+  isSelected,
+  onSelect,
+  showMenu = false,
+  canDelete = true,
+  onDelete
+}) {
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${isSelected ? "bg-zinc-50 border-zinc-950" : "bg-white border-zinc-200 hover:bg-zinc-50"}`,
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950 truncate", children: card.name }),
+          /* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-zinc-950", children: [
+            "\u2022\u2022\u2022\u2022 ",
+            card.number.replaceAll(/\D/g, "").slice(-4)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(CardBrandIcon, { brand: card.brand }),
+        showMenu && /* @__PURE__ */ jsxs(Popover, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "size-10 flex items-center justify-center rounded-lg hover:bg-zinc-100 cursor-pointer",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx(IconDotsVertical, { className: "size-5 text-zinc-500" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              align: "end",
+              className: "w-[140px] p-2 bg-white rounded-2xl shadow-md border border-zinc-200",
+              onClick: (e) => e.stopPropagation(),
+              children: canDelete && /* @__PURE__ */ jsx(
+                NavBarItem,
+                {
+                  icon: /* @__PURE__ */ jsx(IconTrash, { size: 20, className: "text-zinc-400" }),
+                  label: "Excluir",
+                  onClick: () => {
+                    setPopoverOpen(false);
+                    onDelete?.();
+                  }
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CardItem
+};
+//# sourceMappingURL=CardItem.mjs.map

package/dist/components/ui/data-display/CardItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/data-display/CardItem.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { IconDotsVertical, IconTrash } from '@tabler/icons-react';\nimport { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';\nimport { NavBarItem } from '../../layouts/NavBarItem';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport type { Card } from '../../../modules/cards/types';\n\ntype CardItemProps = {\n  card: Card;\n  isSelected?: boolean;\n  onSelect?: () => void;\n  showMenu?: boolean;\n  canDelete?: boolean;\n  onDelete?: () => void;\n};\n\nexport function CardItem({\n  card,\n  isSelected,\n  onSelect,\n  showMenu = false,\n  canDelete = true,\n  onDelete,\n}: CardItemProps) {\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  return (\n    <div\n      className={`flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${\n        isSelected ? 'bg-zinc-50 border-zinc-950' : 'bg-white border-zinc-200 hover:bg-zinc-50'\n      }`}\n      onClick={onSelect}\n    >\n      <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n        <span className=\"paragraph-small-semibold text-zinc-950 truncate\">\n          {card.name}\n        </span>\n        <span className=\"paragraph-small-medium text-zinc-950\">\n          •••• {card.number.replaceAll(/\\D/g, '').slice(-4)}\n        </span>\n      </div>\n      <CardBrandIcon brand={card.brand} />\n      {showMenu && (\n        <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n          <PopoverTrigger asChild>\n            <button\n              className=\"size-10 flex items-center justify-center rounded-lg hover:bg-zinc-100 cursor-pointer\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              <IconDotsVertical className=\"size-5 text-zinc-500\" />\n            </button>\n          </PopoverTrigger>\n          <PopoverContent\n            align=\"end\"\n            className=\"w-[140px] p-2 bg-white rounded-2xl shadow-md border border-zinc-200\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            {canDelete && (\n              <NavBarItem\n                icon={<IconTrash size={20} className=\"text-zinc-400\" />}\n                label=\"Excluir\"\n                onClick={() => {\n                  setPopoverOpen(false);\n                  onDelete?.();\n                }}\n              />\n            )}\n          </PopoverContent>\n        </Popover>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoCQ,cAGA,YAHA;AAlCR,SAAS,gBAAgB;AACzB,SAAS,kBAAkB,iBAAiB;AAC5C,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAYvB,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AACF,GAAkB;AAChB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,kFACT,aAAa,+BAA+B,2CAC9C;AAAA,MACA,SAAS;AAAA,MAET;AAAA,6BAAC,SAAI,WAAU,wCACb;AAAA,8BAAC,UAAK,WAAU,mDACb,eAAK,MACR;AAAA,UACA,qBAAC,UAAK,WAAU,wCAAuC;AAAA;AAAA,YAC/C,KAAK,OAAO,WAAW,OAAO,EAAE,EAAE,MAAM,EAAE;AAAA,aAClD;AAAA,WACF;AAAA,QACA,oBAAC,iBAAc,OAAO,KAAK,OAAO;AAAA,QACjC,YACC,qBAAC,WAAQ,MAAM,aAAa,cAAc,gBACxC;AAAA,8BAAC,kBAAe,SAAO,MACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,cAElC,8BAAC,oBAAiB,WAAU,wBAAuB;AAAA;AAAA,UACrD,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,WAAU;AAAA,cACV,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,cAEjC,uBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,oBAAC,aAAU,MAAM,IAAI,WAAU,iBAAgB;AAAA,kBACrD,OAAM;AAAA,kBACN,SAAS,MAAM;AACb,mCAAe,KAAK;AACpB,+BAAW;AAAA,kBACb;AAAA;AAAA,cACF;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/ui/data-display/Pagination.mjs

@@ -0,0 +1,118 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconDots
+} from "@tabler/icons-react";
+import { cn } from "../../../infra/utils/clsx";
+import { buttonVariants } from "../buttons/Button";
+function Pagination({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      role: "navigation",
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      className: cn("mx-auto flex w-full justify-center", className),
+      ...props
+    }
+  );
+}
+function PaginationContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "pagination-content",
+      className: cn("flex flex-row items-center gap-1.5", className),
+      ...props
+    }
+  );
+}
+function PaginationItem({ ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon-sm",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "pagination-link",
+      "data-active": isActive,
+      className: cn(
+        buttonVariants({
+          variant: isActive ? "secondary" : "ghost",
+          size
+        }),
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PaginationPrevious({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    PaginationLink,
+    {
+      "aria-label": "Go to previous page",
+      size: "default",
+      className: cn("gap-1 size-8 sm:pl-2.5", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+    }
+  );
+}
+function PaginationNext({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    PaginationLink,
+    {
+      "aria-label": "Go to next page",
+      size: "default",
+      className: cn("gap-1 size-8 sm:pr-2.5", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(IconChevronRight, {})
+    }
+  );
+}
+function PaginationEllipsis({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "pagination-ellipsis",
+      className: cn("flex size-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(IconDots, { className: "size-4 mt-1.5" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+      ]
+    }
+  );
+}
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious
+};
+//# sourceMappingURL=Pagination.mjs.map

package/dist/components/ui/data-display/Pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/data-display/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\"\nimport {\n  IconChevronLeft,\n  IconChevronRight,\n  IconDots,\n} from \"@tabler/icons-react\"\nimport { cn } from \"../../../infra/utils/clsx\"\nimport { Button, buttonVariants } from \"../buttons/Button\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon-sm\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"secondary\" : \"ghost\",\n          size,\n        }),\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"gap-1 size-8 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <IconChevronLeft />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"gap-1 size-8 sm:pr-2.5\", className)}\n      {...props}\n    >\n      <IconChevronRight />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <IconDots className=\"size-4 mt-1.5\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n}\n"],"mappings":";AAaI,cA4FA,YA5FA;AAVJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAiB,sBAAsB;AAEvC,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,eAAe,EAAE,GAAG,MAAM,GAA+B;AAChE,SAAO,oBAAC,QAAG,aAAU,mBAAmB,GAAG,OAAO;AACpD;AAOA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc,WAAW,SAAS;AAAA,MAClC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT,eAAe;AAAA,UACb,SAAS,WAAW,cAAc;AAAA,UAClC;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAAgD;AAC9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,MAAK;AAAA,MACL,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA,MAEJ,8BAAC,mBAAgB;AAAA;AAAA,EACnB;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAAgD;AAC9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,MAAK;AAAA,MACL,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA,MAEJ,8BAAC,oBAAiB;AAAA;AAAA,EACpB;AAEJ;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,MAEJ;AAAA,4BAAC,YAAS,WAAU,iBAAgB;AAAA,QACpC,oBAAC,UAAK,WAAU,WAAU,wBAAU;AAAA;AAAA;AAAA,EACtC;AAEJ;","names":[]}

package/dist/components/ui/data-display/PaymentInfoCard.mjs

@@ -0,0 +1,161 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconChevronDown, IconPlus } from "@tabler/icons-react";
+import { CardBrandIcon } from "./CardBrandIcons";
+import { CardItem } from "./CardItem";
+import useIsMobile from "../../../hooks/useIsMobile";
+import { useCards } from "../../../modules/cards/hooks/cards.hook";
+import { useCallback, useState } from "react";
+import { useModalManager } from "../../../store/useModalManager";
+function PaymentInfoCard({
+  email,
+  selectedCardId,
+  onCardSelect,
+  onManageCards,
+  onOpenAddCard
+}) {
+  const isMobile = useIsMobile();
+  const { openModal } = useModalManager();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { data: cardsData } = useCards();
+  const cards = cardsData?.data ?? [];
+  const selectedCard = cards.find((card) => card.id.toString() === selectedCardId.toString());
+  const canDeleteCards = cards.length > 1;
+  const hasCards = cards.length > 0;
+  const hasMoreThan3Cards = cards.length > 3;
+  const shouldShowManageButton = isMobile && hasMoreThan3Cards;
+  const displayedCards = shouldShowManageButton ? cards.slice(0, 3) : cards;
+  const handleOpenAddCardModal = useCallback(() => {
+    if (onOpenAddCard) {
+      onOpenAddCard();
+      return;
+    }
+    openModal("addCardModal", {
+      onCardAdded: (cardId) => onCardSelect(cardId)
+    });
+  }, [openModal, onOpenAddCard, onCardSelect]);
+  const handleDeleteCard = useCallback(
+    (card) => {
+      if (canDeleteCards) {
+        openModal("deleteCardModal", {
+          cardId: card.id.toString(),
+          cardLastDigits: card.number.replaceAll(/\D/g, "").slice(-4),
+          onSuccess: () => {
+            if (card.id === selectedCardId && cards.length > 1) {
+              const remainingCards = cards.filter((c) => c.id !== card.id);
+              if (remainingCards.length > 0) {
+                onCardSelect(remainingCards[0].id.toString());
+              }
+            }
+          }
+        });
+      }
+    },
+    [canDeleteCards, openModal, selectedCardId, cards, onCardSelect]
+  );
+  const handleSelectCard = useCallback(
+    (cardId) => {
+      onCardSelect(cardId);
+      setIsExpanded(false);
+    },
+    [onCardSelect]
+  );
+  if (!hasCards) {
+    return /* @__PURE__ */ jsxs("div", { className: "border border-zinc-200 rounded-lg overflow-hidden", children: [
+      email && /* @__PURE__ */ jsxs("div", { className: "flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 w-[100px]", children: "E-mail" }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-950 flex-1", children: email })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center h-[60px] px-4 gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 w-[100px]", children: "Pagamento" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleOpenAddCardModal,
+            className: "flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit",
+            children: [
+              /* @__PURE__ */ jsx(IconPlus, { className: "size-[18px]" }),
+              /* @__PURE__ */ jsx("span", { className: "px-1.5", children: "Adicionar cart\xE3o" })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "border border-zinc-200 rounded-lg overflow-hidden", children: [
+      email && /* @__PURE__ */ jsxs("div", { className: "flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 w-[100px]", children: "E-mail" }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-950 flex-1", children: email })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex items-center px-4 py-4 cursor-pointer gap-3",
+          onClick: () => setIsExpanded((prev) => !prev),
+          children: !isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 w-[100px]", children: "Pagamento" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950 truncate", children: selectedCard?.name }),
+              /* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-zinc-950", children: [
+                "\u2022\u2022\u2022\u2022 ",
+                selectedCard?.number?.replaceAll(/\D/g, "")?.slice(-4)
+              ] })
+            ] }),
+            selectedCard && /* @__PURE__ */ jsx(CardBrandIcon, { brand: selectedCard.brand }),
+            /* @__PURE__ */ jsx("div", { className: "size-8 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(IconChevronDown, { className: "size-[18px] text-zinc-500" }) })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950 flex-1", children: "Selecione a forma de pagamento" }),
+            /* @__PURE__ */ jsx("div", { className: "size-8 flex items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(IconChevronDown, { className: "size-[18px] text-zinc-500 rotate-180" }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex flex-col gap-2 px-4 overflow-hidden transition-all duration-300 ease-in-out ${isExpanded ? "max-h-[500px] pb-4 opacity-100" : "max-h-0 pb-0 opacity-0"}`,
+          children: [
+            displayedCards.map((card) => /* @__PURE__ */ jsx(
+              CardItem,
+              {
+                card,
+                isSelected: card.id.toString() === selectedCardId.toString(),
+                onSelect: () => handleSelectCard(card.id.toString()),
+                showMenu: true,
+                canDelete: canDeleteCards,
+                onDelete: () => handleDeleteCard(card)
+              },
+              card.id
+            )),
+            shouldShowManageButton && onManageCards && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onManageCards,
+                className: "flex items-center justify-center h-10 px-4 paragraph-small-semibold text-cyan-600 border border-cyan-200 rounded-lg hover:bg-cyan-50 transition-colors cursor-pointer mt-2",
+                children: "Gerenciar cart\xF5es"
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleOpenAddCardModal,
+        className: "flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit",
+        children: [
+          /* @__PURE__ */ jsx(IconPlus, { className: "size-[18px]" }),
+          /* @__PURE__ */ jsx("span", { className: "px-1.5", children: isExpanded ? "Adicionar cart\xE3o" : "Nova forma de pagamento" })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  PaymentInfoCard
+};
+//# sourceMappingURL=PaymentInfoCard.mjs.map

package/dist/components/ui/data-display/PaymentInfoCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/data-display/PaymentInfoCard.tsx"],"sourcesContent":["'use client';\n\nimport { IconChevronDown, IconPlus } from '@tabler/icons-react';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport { CardItem } from './CardItem';\nimport useIsMobile from '../../../hooks/useIsMobile';\nimport { useCards } from '../../../modules/cards/hooks/cards.hook';\nimport { useCallback, useState } from 'react';\nimport { useModalManager } from '../../../store/useModalManager';\nimport type { Card } from '../../../modules/cards/types';\n\ntype PaymentInfoCardProps = {\n  email?: string;\n  selectedCardId: string;\n  onCardSelect: (cardId: string) => void;\n  onManageCards?: () => void;\n  onOpenAddCard?: () => void;\n};\n\nexport function PaymentInfoCard({\n  email,\n  selectedCardId,\n  onCardSelect,\n  onManageCards,\n  onOpenAddCard,\n}: PaymentInfoCardProps) {\n  const isMobile = useIsMobile();\n  const { openModal } = useModalManager();\n\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const { data: cardsData } = useCards();\n  const cards = cardsData?.data ?? [];\n\n  const selectedCard = cards.find((card) => card.id.toString() === selectedCardId.toString());\n\n  const canDeleteCards = cards.length > 1;\n  const hasCards = cards.length > 0;\n\n  const hasMoreThan3Cards = cards.length > 3;\n  const shouldShowManageButton = isMobile && hasMoreThan3Cards;\n  const displayedCards = shouldShowManageButton ? cards.slice(0, 3) : cards;\n\n  const handleOpenAddCardModal = useCallback(() => {\n    if (onOpenAddCard) {\n      onOpenAddCard();\n      return;\n    }\n    openModal('addCardModal', {\n      onCardAdded: (cardId: string) => onCardSelect(cardId),\n    });\n  }, [openModal, onOpenAddCard, onCardSelect]);\n\n  const handleDeleteCard = useCallback(\n    (card: Card) => {\n      if (canDeleteCards) {\n        openModal('deleteCardModal', {\n          cardId: card.id.toString(),\n          cardLastDigits: card.number.replaceAll(/\\D/g, '').slice(-4),\n          onSuccess: () => {\n            if (card.id === selectedCardId && cards.length > 1) {\n              const remainingCards = cards.filter((c) => c.id !== card.id);\n              if (remainingCards.length > 0) {\n                onCardSelect(remainingCards[0].id.toString());\n              }\n            }\n          },\n        });\n      }\n    },\n    [canDeleteCards, openModal, selectedCardId, cards, onCardSelect]\n  );\n\n  const handleSelectCard = useCallback(\n    (cardId: string) => {\n      onCardSelect(cardId);\n      setIsExpanded(false);\n    },\n    [onCardSelect]\n  );\n\n  if (!hasCards) {\n    return (\n      <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n        {email && (\n          <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n            <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">E-mail</span>\n            <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n          </div>\n        )}\n        <div className=\"flex items-center h-[60px] px-4 gap-3\">\n          <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">Pagamento</span>\n          <button\n            type=\"button\"\n            onClick={handleOpenAddCardModal}\n            className=\"flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit\"\n          >\n            <IconPlus className=\"size-[18px]\" />\n            <span className=\"px-1.5\">Adicionar cartão</span>\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n        {email && (\n          <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n            <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">E-mail</span>\n            <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n          </div>\n        )}\n\n        <div\n          className=\"flex items-center px-4 py-4 cursor-pointer gap-3\"\n          onClick={() => setIsExpanded((prev) => !prev)}\n        >\n          {!isExpanded ? (\n            <>\n              <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">Pagamento</span>\n              <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n                <span className=\"paragraph-small-semibold text-zinc-950 truncate\">{selectedCard?.name}</span>\n                <span className=\"paragraph-small-medium text-zinc-950\">\n                  •••• {selectedCard?.number?.replaceAll(/\\D/g, '')?.slice(-4)}\n                </span>\n              </div>\n              {selectedCard && <CardBrandIcon brand={selectedCard.brand} />}\n              <div className=\"size-8 flex items-center justify-center rounded-lg\">\n                <IconChevronDown className=\"size-[18px] text-zinc-500\" />\n              </div>\n            </>\n          ) : (\n            <>\n              <span className=\"paragraph-small-semibold text-zinc-950 flex-1\">\n                Selecione a forma de pagamento\n              </span>\n              <div className=\"size-8 flex items-center justify-center rounded-lg\">\n                <IconChevronDown className=\"size-[18px] text-zinc-500 rotate-180\" />\n              </div>\n            </>\n          )}\n        </div>\n\n        <div\n          className={`flex flex-col gap-2 px-4 overflow-hidden transition-all duration-300 ease-in-out ${\n            isExpanded ? 'max-h-[500px] pb-4 opacity-100' : 'max-h-0 pb-0 opacity-0'\n          }`}\n        >\n          {displayedCards.map((card) => (\n            <CardItem\n              key={card.id}\n              card={card}\n              isSelected={card.id.toString() === selectedCardId.toString()}\n              onSelect={() => handleSelectCard(card.id.toString())}\n              showMenu\n              canDelete={canDeleteCards}\n              onDelete={() => handleDeleteCard(card)}\n            />\n          ))}\n          {shouldShowManageButton && onManageCards && (\n            <button\n              type=\"button\"\n              onClick={onManageCards}\n              className=\"flex items-center justify-center h-10 px-4 paragraph-small-semibold text-cyan-600 border border-cyan-200 rounded-lg hover:bg-cyan-50 transition-colors cursor-pointer mt-2\"\n            >\n              Gerenciar cartões\n            </button>\n          )}\n        </div>\n      </div>\n\n      <button\n        type=\"button\"\n        onClick={handleOpenAddCardModal}\n        className=\"flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit\"\n      >\n        <IconPlus className=\"size-[18px]\" />\n        <span className=\"px-1.5\">\n          {isExpanded ? 'Adicionar cartão' : 'Nova forma de pagamento'}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/data-display/ScrollArea.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../../../infra/utils/clsx";
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-border relative flex-1 rounded-full"
+        }
+      )
+    }
+  );
+}
+export {
+  ScrollArea,
+  ScrollBar
+};
+//# sourceMappingURL=ScrollArea.mjs.map

package/dist/components/ui/data-display/ScrollArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/data-display/ScrollArea.tsx"],"sourcesContent":["'use client';\n\n\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\nimport { cn } from \"../../../infra/utils/clsx\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none\",\n        orientation === \"vertical\" &&\n          \"h-full w-2.5 border-l border-l-transparent\",\n        orientation === \"horizontal\" &&\n          \"h-2.5 flex-col border-t border-t-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n"],"mappings":";AAcI,SAKE,KALF;AATJ,YAAY,yBAAyB;AACrC,SAAS,UAAU;AAEnB,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0D;AACxD,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,YAAY,SAAS;AAAA,MAClC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC,oBAAoB;AAAA,UAApB;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,aAAU;AAAA,QACX,oBAAC,oBAAoB,QAApB,EAA2B;AAAA;AAAA;AAAA,EAC9B;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAyE;AACvE,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,cACd;AAAA,QACF,gBAAgB,gBACd;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA;AAAA,MACZ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/ui/data-display/Separator.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "../../../infra/utils/clsx";
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Separator
+};
+//# sourceMappingURL=Separator.mjs.map

package/dist/components/ui/data-display/Separator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/data-display/Separator.tsx"],"sourcesContent":["'use client';\n\n\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\nimport { cn } from \"../../../infra/utils/clsx\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n"],"mappings":";AAeI;AAVJ,YAAY,wBAAwB;AACpC,SAAS,UAAU;AAEnB,SAAS,UAAU;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,GAAyD;AACvD,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/data-display/Table.mjs

@@ -0,0 +1,116 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../infra/utils/clsx";
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCaption({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: cn("text-muted-foreground mt-4 text-sm", className),
+      ...props
+    }
+  );
+}
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};
+//# sourceMappingURL=Table.mjs.map

package/dist/components/ui/data-display/Table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/data-display/Table.tsx"],"sourcesContent":["'use client';\n\n\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../../infra/utils/clsx\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"],"mappings":";AAaM;AARN,SAAS,UAAU;AAEnB,SAAS,MAAM,EAAE,WAAW,GAAG,MAAM,GAAkC;AACrE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,UACvD,GAAG;AAAA;AAAA,MACN;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAkC;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mBAAmB,SAAS;AAAA,MACzC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAkC;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACpD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAkC;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAA+B;AACrE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAA+B;AACtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAA+B;AACtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,GAAG;AACL,GAAoC;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}