@ttoss/components 2.14.24 → 2.14.26

package/dist/index.mjs

@@ -0,0 +1,3074 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Badge, BaseStyles, Box, Button, Card, CloseButton, Divider, Flex, Heading, IconButton, Input, Label, Link, Stack, Tag, Text, TooltipIcon, keyframes, useResponsiveValue, useTheme } from "@ttoss/ui";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@ttoss/react-icons";
+import { DayPicker } from "react-day-picker";
+import { ptBR } from "react-day-picker/locale";
+import DrawerUi from "react-modern-drawer";
+import { defineMessages, useI18n } from "@ttoss/react-i18n";
+import { JsonEditor } from "json-edit-react";
+import { JsonView } from "react-json-view-lite";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import { css } from "@theme-ui/css";
+import ReactModal from "react-modal";
+import { useDebounce } from "@ttoss/react-hooks";
+import { createCell, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { Tab, TabList, TabPanel, Tabs as Tabs$1 } from "react-tabs";
+import { css as css$1 } from "@emotion/css";
+import { ToastContainer as ToastContainer$1, toast as toast$1 } from "react-toastify";
+
+//#region src/components/Accordion/Accordion.tsx
+/**
+* Accessible accordion component with collapsible content sections.
+*
+* This component provides a simplified API for creating expandable/collapsible
+* content sections. It uses design tokens from @ttoss/theme for consistent styling
+* and follows WAI-ARIA accordion pattern for accessibility.
+*
+* @example
+* ```tsx
+* <Accordion
+*   items={[
+*     {
+*       title: 'Section 1',
+*       content: 'Content for section 1',
+*     },
+*     {
+*       title: 'Section 2',
+*       content: 'Content for section 2',
+*     },
+*   ]}
+* />
+* ```
+*
+* @example
+* ```tsx
+* <Accordion
+*   multiple
+*   defaultExpanded={[0, 1]}
+*   items={[
+*     {
+*       id: 'item-1',
+*       title: 'Pre-expanded Section 1',
+*       content: <div>Rich content</div>,
+*     },
+*     {
+*       id: 'item-2',
+*       title: 'Pre-expanded Section 2',
+*       content: <p>More content</p>,
+*     },
+*   ]}
+*   onAccordionChange={(expanded) => console.log('Expanded items:', expanded)}
+* />
+* ```
+*
+* @example
+* ```tsx
+* // Custom rendering with renderItem
+* <Accordion
+*   items={items}
+*   renderItem={({ item, isExpanded, toggle, ids }) => (
+*     <CustomAccordionItem
+*       item={item}
+*       isExpanded={isExpanded}
+*       onToggle={toggle}
+*       headingId={ids.headingId}
+*       panelId={ids.panelId}
+*     />
+*   )}
+* />
+* ```
+*/
+var Accordion = ({
+  items,
+  multiple = false,
+  defaultExpanded,
+  onAccordionChange,
+  renderItem,
+  sx,
+  ...boxProps
+}) => {
+  const [expandedIndices, setExpandedIndices] = React.useState(() => {
+    if (defaultExpanded === void 0) return [];
+    return Array.isArray(defaultExpanded) ? defaultExpanded : [defaultExpanded];
+  });
+  const toggleItem = React.useCallback(index => {
+    setExpandedIndices(prev => {
+      const isExpanded = prev.includes(index);
+      let newExpanded;
+      if (isExpanded) newExpanded = prev.filter(i => {
+        return i !== index;
+      });else newExpanded = multiple ? [...prev, index] : [index];
+      onAccordionChange?.(newExpanded);
+      return newExpanded;
+    });
+  }, [multiple, onAccordionChange]);
+  return /* @__PURE__ */jsx(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2,
+      ...sx
+    },
+    ...boxProps,
+    children: items.map((item, index) => {
+      const isExpanded = expandedIndices.includes(index);
+      const itemId = item.id || `accordion-item-${index}`;
+      const headingId = `${itemId}-heading`;
+      const panelId = `${itemId}-panel`;
+      if (renderItem) return /* @__PURE__ */jsx(React.Fragment, {
+        children: renderItem({
+          item,
+          index,
+          isExpanded,
+          toggle: () => {
+            return toggleItem(index);
+          },
+          ids: {
+            itemId,
+            headingId,
+            panelId
+          }
+        })
+      }, itemId);
+      return /* @__PURE__ */jsxs(Box, {
+        sx: {
+          border: "sm",
+          borderColor: "display.border.muted.default",
+          borderRadius: "md",
+          overflow: "hidden"
+        },
+        children: [/* @__PURE__ */jsx(Button, {
+          id: headingId,
+          type: "button",
+          disabled: item.disabled,
+          onClick: () => {
+            toggleItem(index);
+          },
+          "aria-expanded": isExpanded,
+          "aria-controls": panelId,
+          rightIcon: isExpanded ? "chevron-up" : "chevron-down",
+          sx: {
+            width: "100%",
+            justifyContent: "space-between",
+            backgroundColor: isExpanded ? "display.background.muted.default" : "display.background.primary.default",
+            color: item.disabled ? "display.text.muted.default" : "display.text.primary.default",
+            fontWeight: 500,
+            border: "none",
+            borderRadius: 0,
+            transition: "background-color 0.2s ease",
+            "&:hover:not(:disabled)": {
+              backgroundColor: "display.background.muted.default"
+            },
+            "&:focus": {
+              outline: "none",
+              boxShadow: theme => {
+                return `inset 0 0 0 1px ${theme.colors?.input?.border?.accent?.default || "currentColor"}`;
+              }
+            }
+          },
+          children: item.title
+        }), isExpanded && /* @__PURE__ */jsx(Box, {
+          id: panelId,
+          role: "region",
+          "aria-labelledby": headingId,
+          sx: {
+            padding: 4,
+            borderTop: "sm",
+            borderColor: "display.border.muted.default",
+            backgroundColor: "display.background.primary.default"
+          },
+          children: item.content
+        })]
+      }, itemId);
+    })
+  });
+};
+
+//#endregion
+//#region src/components/DatePicker/DatePicker.tsx
+var formatDate = date => {
+  return date.toLocaleDateString("pt-BR");
+};
+var DatePicker = ({
+  label,
+  value,
+  presets,
+  onChange,
+  disabled
+}) => {
+  const [date, setDate] = React.useState(value);
+  const [pickerSelection, setPickerSelection] = React.useState(value);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const isResettingRangeRef = React.useRef(false);
+  React.useEffect(() => {
+    setDate(value);
+  }, [value]);
+  React.useEffect(() => {
+    if (isOpen) setPickerSelection(date);
+  }, [isOpen, date]);
+  React.useEffect(() => {
+    const handleClickOutside = event => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) setIsOpen(false);
+    };
+    if (isOpen) document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const commitSelection = range => {
+    setDate(range);
+    onChange?.(range);
+  };
+  const handlePresetClick = preset => {
+    commitSelection(preset.getValue());
+    setIsOpen(false);
+  };
+  const handleDayPickerSelect = selected => {
+    if (isResettingRangeRef.current && !selected && pickerSelection?.from && !pickerSelection?.to) {
+      commitSelection({
+        from: pickerSelection.from,
+        to: pickerSelection.from
+      });
+      setIsOpen(false);
+      return;
+    }
+    isResettingRangeRef.current = false;
+    const hadFullRange = date?.from && date?.to;
+    const hadPartialPicker = pickerSelection?.from && !pickerSelection?.to;
+    if (hadFullRange && !hadPartialPicker && selected?.from && selected?.to) {
+      setPickerSelection({
+        from: selected.from.getTime() === date?.from?.getTime() ? selected.to : selected.from,
+        to: void 0
+      });
+      return;
+    }
+    setPickerSelection(selected);
+    if (selected?.from && selected?.to) {
+      commitSelection(selected);
+      setIsOpen(false);
+    } else if (!selected?.from && !selected?.to) commitSelection(void 0);
+  };
+  const handleDayClick = day => {
+    if (date?.from && date?.to) {
+      isResettingRangeRef.current = true;
+      setPickerSelection({
+        from: day,
+        to: void 0
+      });
+    }
+  };
+  return /* @__PURE__ */jsxs(Flex, {
+    ref: containerRef,
+    sx: {
+      flexDirection: "column",
+      gap: "1",
+      position: "relative"
+    },
+    children: [label && /* @__PURE__ */jsx(Label, {
+      children: label
+    }), /* @__PURE__ */jsx(Button, {
+      disabled,
+      variant: "secondary",
+      onClick: () => {
+        return setIsOpen(!isOpen);
+      },
+      sx: {
+        width: "100%",
+        justifyContent: "space-between",
+        fontSize: ["14px", "14px"],
+        fontWeight: 400,
+        backgroundColor: "white",
+        padding: "8px 12px",
+        borderRadius: "lg",
+        border: "md",
+        borderColor: "display.border.muted.default",
+        height: "40px",
+        minWidth: ["auto", "240px"],
+        "&:disabled": {
+          borderColor: "display.border.muted.default"
+        }
+      },
+      children: date?.from ? date.to ? /* @__PURE__ */jsxs(Text, {
+        sx: {
+          fontSize: ["12px", "14px"],
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: [formatDate(date.from), " - ", formatDate(date.to)]
+      }) : /* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: ["12px", "14px"],
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: formatDate(date.from)
+      }) : /* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: ["12px", "14px"]
+        },
+        children: "Selecione o período"
+      })
+    }), isOpen && /* @__PURE__ */jsxs(Fragment, {
+      children: [/* @__PURE__ */jsx(Box, {
+        sx: {
+          display: ["block", "none"],
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          zIndex: 49
+        },
+        onClick: () => {
+          return setIsOpen(false);
+        }
+      }), /* @__PURE__ */jsxs(Box, {
+        sx: {
+          position: ["fixed", "absolute"],
+          top: ["auto", "calc(100% + 4px)"],
+          bottom: ["0", "auto"],
+          left: ["0", "0"],
+          right: ["0", "auto"],
+          width: ["100%", "auto"],
+          maxWidth: ["100%", "650px"],
+          zIndex: 50,
+          backgroundColor: "white",
+          border: "1px solid",
+          borderColor: "display.border.muted.default",
+          borderRadius: ["16px 16px 0 0", "8px"],
+          boxShadow: ["0 -4px 6px -1px rgba(0, 0, 0, 0.1)", "0 4px 6px -1px rgba(0, 0, 0, 0.1)"],
+          overflow: "hidden",
+          maxHeight: ["80vh", "none"],
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [/* @__PURE__ */jsxs(Flex, {
+          sx: {
+            display: ["flex", "none"],
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: "12px 16px",
+            borderBottom: "1px solid",
+            borderColor: "display.border.muted.default"
+          },
+          children: [/* @__PURE__ */jsx(Text, {
+            sx: {
+              fontSize: "16px",
+              fontWeight: 600
+            },
+            children: label || "Selecione o período"
+          }), /* @__PURE__ */jsx(Button, {
+            variant: "ghost",
+            onClick: () => {
+              return setIsOpen(false);
+            },
+            sx: {
+              padding: "4px",
+              minWidth: "auto",
+              width: "32px",
+              height: "32px"
+            },
+            children: /* @__PURE__ */jsx(Icon, {
+              icon: "mdi:close",
+              size: 20
+            })
+          })]
+        }), /* @__PURE__ */jsxs(Flex, {
+          sx: {
+            minHeight: "300px",
+            flexDirection: ["column", "row"],
+            maxHeight: ["calc(80vh - 60px)", "none"],
+            overflow: ["auto", "visible"]
+          },
+          children: [presets && presets.length > 0 && /* @__PURE__ */jsx(Flex, {
+            sx: {
+              flexDirection: ["row", "column"],
+              gap: "4px",
+              padding: ["8px", "12px"],
+              borderRight: ["none", "1px solid"],
+              borderBottom: ["1px solid", "none"],
+              borderColor: "display.border.muted.default",
+              backgroundColor: "navigation.background.muted.default",
+              minWidth: ["auto", "140px"],
+              width: ["100%", "auto"],
+              overflowX: ["auto", "visible"],
+              overflowY: ["visible", "auto"],
+              flexWrap: ["nowrap", "wrap"],
+              "@media (max-width: 768px)": {
+                "&::-webkit-scrollbar": {
+                  display: "none"
+                },
+                scrollbarWidth: "none"
+              }
+            },
+            children: presets?.map(preset => {
+              return /* @__PURE__ */jsx(Button, {
+                variant: "ghost",
+                onClick: () => {
+                  return handlePresetClick(preset);
+                },
+                sx: {
+                  justifyContent: ["center", "flex-start"],
+                  fontSize: ["12px", "14px"],
+                  fontWeight: 400,
+                  padding: ["6px 8px", "8px 12px"],
+                  color: "display.text.secondary.default",
+                  backgroundColor: "transparent",
+                  whiteSpace: "nowrap",
+                  minWidth: ["auto", "auto"],
+                  flexShrink: 0,
+                  "&:hover": {
+                    backgroundColor: "input.background.muted.active"
+                  }
+                },
+                children: preset.label
+              }, preset.label);
+            })
+          }), /* @__PURE__ */jsx(Box, {
+            sx: {
+              padding: ["12px", "16px"],
+              flex: 1,
+              overflow: "auto",
+              "& .rdp": {
+                margin: 0
+              },
+              "& .rdp-month": {
+                width: "100%"
+              },
+              "& .rdp-day_button": {
+                borderRadius: "50% !important",
+                border: "none",
+                fontSize: ["12px", "14px"],
+                width: ["32px", "36px"],
+                height: ["32px", "36px"],
+                cursor: "pointer"
+              },
+              "& .rdp-range_start .rdp-day_button": {
+                backgroundColor: "action.background.accent.default",
+                color: "black"
+              },
+              "& .rdp-range_end .rdp-day_button": {
+                backgroundColor: "action.background.accent.default",
+                color: "black"
+              },
+              "& .rdp-day_button:hover": {
+                backgroundColor: "action.background.primary.default",
+                color: "action.text.primary.default"
+              },
+              "& .rdp-day_selected": {
+                backgroundColor: "action.background.accent.default",
+                color: "white",
+                fontWeight: 600
+              },
+              "& .rdp-day_range_middle": {
+                backgroundColor: "action.background.accent.default",
+                color: "white"
+              },
+              "& .rdp-day_range_start, & .rdp-day_range_end": {
+                backgroundColor: "action.background.accent.default",
+                color: "white",
+                fontWeight: 600
+              },
+              "& .rdp-weekday": {
+                fontSize: ["10px", "12px"],
+                fontWeight: 500,
+                color: "display.text.muted.default"
+              },
+              "& .rdp-month_caption": {
+                fontSize: ["12px", "14px"],
+                fontWeight: 600,
+                marginBottom: ["12px", "16px"]
+              },
+              "@media (max-width: 768px)": {
+                "& .rdp-caption": {
+                  marginBottom: "8px"
+                },
+                "& .rdp-table": {
+                  width: "100%"
+                }
+              }
+            },
+            children: /* @__PURE__ */jsx(DayPicker, {
+              disabled,
+              mode: "range",
+              locale: ptBR,
+              selected: pickerSelection?.from ? {
+                from: pickerSelection.from,
+                to: pickerSelection.to ?? pickerSelection.from
+              } : void 0,
+              onSelect: selected => {
+                return handleDayPickerSelect(selected);
+              },
+              onDayClick: handleDayClick,
+              weekStartsOn: 1,
+              showOutsideDays: true
+            })
+          })]
+        })]
+      })]
+    })]
+  });
+};
+
+//#endregion
+//#region src/components/Drawer/Drawer.tsx
+var Drawer = ({
+  children,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx(Box, {
+    "data-testid": "drawer-container",
+    sx: {
+      /**
+      * https://github.com/Farzin-Firoozi/react-modern-drawer/blob/master/src/styles.css
+      */
+      zIndex: "overlay",
+      width: "100%",
+      height: "100%",
+      ".EZDrawer__checkbox": {
+        display: "none"
+      },
+      ".EZDrawer__checkbox:checked ~ .EZDrawer__overlay": {
+        display: "block",
+        opacity: 1
+      },
+      ".EZDrawer__checkbox:checked ~ .EZDrawer__container": {
+        visibility: "visible",
+        transform: "translate3d(0, 0, 0) !important"
+      },
+      ".EZDrawer__overlay ": {
+        display: "none",
+        height: "100vh",
+        left: "0",
+        position: "fixed",
+        top: "0",
+        width: "100%"
+      },
+      ".EZDrawer__container": {
+        position: "fixed",
+        visibility: "hidden",
+        backgroundColor: "navigation.background.muted.default",
+        transition: "all",
+        boxShadow: "0 0 10px 5px rgba(0, 0, 0, 0.1)",
+        paddingX: "6",
+        overflowY: "auto"
+      },
+      ...sx
+    },
+    children: /* @__PURE__ */jsx(DrawerUi, {
+      ...props,
+      children: /* @__PURE__ */jsx(Box, {
+        sx: {
+          width: "100%",
+          height: "100%"
+        },
+        children
+      })
+    })
+  });
+};
+
+//#endregion
+//#region src/components/EnhancedTitle/EnhancedTitle.styles.ts
+var gradientFlow = keyframes({
+  "0%": {
+    backgroundPosition: "0% 50%"
+  },
+  "50%": {
+    backgroundPosition: "100% 50%"
+  },
+  "100%": {
+    backgroundPosition: "0% 50%"
+  }
+});
+var getAccentGradientBackground = t => {
+  const theme = t;
+  const start = theme.colors?.action?.background?.accent?.default || theme.colors?.input?.background?.accent?.default;
+  if (!start) return void 0;
+  return `linear-gradient(270deg, ${start}, ${theme.colors?.action?.background?.accent?.active || theme.colors?.input?.background?.accent?.active || start}, ${start})`;
+};
+var getPrimaryGradientBackground = t => {
+  const theme = t;
+  const start = theme.colors?.action?.background?.primary?.default;
+  if (!start) return void 0;
+  return `linear-gradient(270deg, ${start}, ${theme.colors?.action?.background?.secondary?.default || start}, ${start})`;
+};
+/**
+* Returns style configuration for the icon wrapper based on variant.
+*/
+var getEnhancedTitleIconSx = variant => {
+  return {
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "2xl",
+    border: "md",
+    width: "56px",
+    height: "56px",
+    ...{
+      "spotlight-accent": {
+        backgroundColor: "input.background.accent.default",
+        color: "action.text.accent.default",
+        borderColor: "display.border.muted.default",
+        background: getAccentGradientBackground,
+        backgroundSize: "400% 400%",
+        animation: `${gradientFlow} 6s ease infinite`
+      },
+      "spotlight-primary": {
+        backgroundColor: "action.background.primary.default",
+        color: "display.text.accent.default",
+        borderColor: "display.border.muted.default",
+        background: getPrimaryGradientBackground,
+        backgroundSize: "400% 400%",
+        animation: `${gradientFlow} 6s ease infinite`
+      },
+      primary: {
+        backgroundColor: "action.background.primary.default",
+        color: "action.text.primary.default",
+        borderColor: "display.border.muted.default"
+      },
+      secondary: {
+        backgroundColor: "action.background.secondary.default",
+        color: "action.text.primary.default",
+        borderColor: "display.border.muted.default"
+      },
+      accent: {
+        backgroundColor: "action.background.accent.default",
+        color: "action.text.accent.default",
+        borderColor: "display.border.muted.default"
+      },
+      positive: {
+        backgroundColor: "display.bg.positive.boldest",
+        color: "display.fg.positive.bolder",
+        borderColor: "display.border.muted.default"
+      },
+      negative: {
+        backgroundColor: "display.bg.negative.boldest",
+        color: "display.fg.negative.bolder",
+        borderColor: "display.border.muted.default"
+      },
+      informative: {
+        backgroundColor: "display.bg.informative.boldest",
+        color: "display.fg.informative.bolder",
+        borderColor: "display.border.muted.default"
+      },
+      muted: {
+        backgroundColor: "display.bg.muted.boldest",
+        color: "display.fg.muted.bolder",
+        borderColor: "display.border.muted.default"
+      }
+    }[variant]
+  };
+};
+
+//#endregion
+//#region src/components/EnhancedTitle/EnhancedTitle.tsx
+/**
+* EnhancedTitle component renders a structured title section with icon, badges, and metadata.
+*
+* This component is useful for displaying rich title sections with status indicators,
+* feature tags, and supplementary information in a consistent layout.
+*
+* @example
+* ```tsx
+* <EnhancedTitle
+*   icon="fluent:shield-24-filled"
+*   title="Starter Plan"
+*   frontTitle="R$ 49,90/mês"
+*   description="Perfect for small teams"
+*   variant="primary"
+*   topBadges={[
+*     { label: 'Active', variant: 'positive', icon: 'fluent:checkmark-circle-24-filled' }
+*   ]}
+*   bottomBadges={[
+*     { label: 'OneClick Tracking', icon: 'fluent:checkmark-24-filled' }
+*   ]}
+* />
+* ```
+*
+* @example
+* ```tsx
+* <EnhancedTitle
+*   title="Pro Plan"
+*   frontTitle="$99/month"
+*   variant="accent"
+*   topBadges={[
+*     { label: 'Most Popular', variant: 'informative' }
+*   ]}
+* />
+* ```
+*/
+var EnhancedTitle = ({
+  variant = "spotlight-primary",
+  icon,
+  title,
+  description,
+  frontTitle,
+  topBadges = [],
+  bottomBadges = []
+}) => {
+  return /* @__PURE__ */jsx(Stack, {
+    sx: {
+      paddingY: "6",
+      paddingX: "6",
+      width: "full"
+    },
+    children: /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        gap: "6",
+        alignItems: "flex-start",
+        flexDirection: ["column", "row"]
+      },
+      children: [icon && /* @__PURE__ */jsx(Flex, {
+        sx: getEnhancedTitleIconSx(variant),
+        children: /* @__PURE__ */jsx(Icon, {
+          icon,
+          width: 24,
+          height: 24
+        })
+      }), /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          flexDirection: "column",
+          gap: ["4", "5"],
+          flex: 1
+        },
+        children: [topBadges.length > 0 && /* @__PURE__ */jsx(Flex, {
+          sx: {
+            flexWrap: "wrap",
+            gap: "2",
+            alignItems: "center"
+          },
+          children: topBadges.map((badge, index) => {
+            return /* @__PURE__ */jsx(Badge, {
+              icon: badge.icon,
+              variant: badge.variant ?? "muted",
+              sx: {
+                borderRadius: "full"
+              },
+              children: badge.label
+            }, index);
+          })
+        }), /* @__PURE__ */jsxs(Flex, {
+          sx: {
+            flexDirection: ["column", "row"],
+            alignItems: ["flex-start", "baseline"],
+            gap: ["1", "3"]
+          },
+          children: [/* @__PURE__ */jsx(Heading, {
+            as: "h2",
+            sx: {
+              fontSize: "4xl",
+              fontWeight: "semibold",
+              color: "display.text.primary.default"
+            },
+            children: title
+          }), frontTitle && /* @__PURE__ */jsx(Text, {
+            sx: {
+              fontSize: "xl",
+              color: "display.text.secondary.default"
+            },
+            children: frontTitle
+          })]
+        }), description && /* @__PURE__ */jsx(Text, {
+          sx: {
+            fontSize: "md",
+            color: "display.text.secondary.default"
+          },
+          children: description
+        }), bottomBadges.length > 0 && /* @__PURE__ */jsx(Flex, {
+          sx: {
+            flexWrap: "wrap",
+            gap: "2"
+          },
+          children: bottomBadges.map((badge, index) => {
+            return /* @__PURE__ */jsx(Badge, {
+              icon: badge.icon ?? "fluent:checkmark-24-filled",
+              variant: badge.variant ?? "muted",
+              sx: {
+                borderRadius: "full"
+              },
+              children: badge.label
+            }, index);
+          })
+        })]
+      })]
+    })
+  });
+};
+
+//#endregion
+//#region src/components/FileUploader/FileUploader.tsx
+var FileUploader = ({
+  onUpload,
+  onUploadStart,
+  onUploadProgress,
+  onUploadComplete,
+  onUploadError,
+  onFilesChange,
+  onRemove,
+  accept,
+  multiple = true,
+  maxSize = 10 * 1024 * 1024,
+  maxFiles = 5,
+  disabled = false,
+  autoUpload = true,
+  retryAttempts = 2,
+  placeholder,
+  error,
+  children,
+  showFileList = true,
+  FileListComponent,
+  files: uploadedFiles = []
+}) => {
+  const {
+    intl
+  } = useI18n();
+  const [files, setFiles] = React.useState([]);
+  const [isDragOver, setIsDragOver] = React.useState(false);
+  const fileInputRef = React.useRef(null);
+  const formatFileSize = bytes => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+  const validateFiles = newFiles => {
+    const fileArray = Array.from(newFiles);
+    const validFiles = [];
+    const currentFileCount = files.length;
+    if (currentFileCount >= maxFiles) return [];
+    for (const file of fileArray) {
+      if (maxSize && file.size > maxSize) continue;
+      if (validFiles.length + currentFileCount >= maxFiles) break;
+      validFiles.push(file);
+    }
+    return validFiles;
+  };
+  const updateFileState = React.useCallback((file, updates) => {
+    setFiles(prevFiles => {
+      const newFiles = prevFiles.map(f => {
+        return f.file === file ? {
+          ...f,
+          ...updates
+        } : f;
+      });
+      onFilesChange?.(newFiles);
+      return newFiles;
+    });
+  }, [onFilesChange]);
+  const uploadFile = React.useCallback(async (fileState, attempts = 0) => {
+    try {
+      onUploadStart?.(fileState.file);
+      updateFileState(fileState.file, {
+        status: "uploading",
+        progress: 0
+      });
+      const result = await onUpload(fileState.file, progress => {
+        updateFileState(fileState.file, {
+          progress
+        });
+        onUploadProgress?.(fileState.file, progress);
+      });
+      updateFileState(fileState.file, {
+        status: "completed",
+        progress: 100,
+        result
+      });
+      onUploadComplete?.(fileState.file, result);
+    } catch (error_) {
+      const error = error_;
+      if (attempts < retryAttempts) setTimeout(() => {
+        return uploadFile(fileState, attempts + 1);
+      }, 1e3 * (attempts + 1));else {
+        updateFileState(fileState.file, {
+          status: "error",
+          error
+        });
+        onUploadError?.(fileState.file, error);
+      }
+    }
+  }, [onUpload, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, retryAttempts, updateFileState]);
+  const addFiles = newFiles => {
+    const newFileStates = newFiles.map(file => {
+      return {
+        file,
+        status: "pending"
+      };
+    });
+    setFiles(prevFiles => {
+      const updatedFiles = [...prevFiles, ...newFileStates];
+      onFilesChange?.(updatedFiles);
+      return updatedFiles;
+    });
+    if (autoUpload) for (const fileState of newFileStates) uploadFile(fileState);
+  };
+  const handleFileChange = event => {
+    if (event.target.files) addFiles(validateFiles(event.target.files));
+  };
+  const handleDrop = event => {
+    event.preventDefault();
+    setIsDragOver(false);
+    if (disabled || files.length >= maxFiles) return;
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles) addFiles(validateFiles(droppedFiles));
+  };
+  const handleDragOver = event => {
+    event.preventDefault();
+    if (!disabled && files.length < maxFiles) setIsDragOver(true);
+  };
+  const handleDragLeave = event => {
+    event.preventDefault();
+    setIsDragOver(false);
+  };
+  const handleClick = () => {
+    if (!disabled && files.length < maxFiles && fileInputRef.current) fileInputRef.current.click();
+  };
+  const handleRemoveFile = React.useCallback(index => {
+    const fileToRemove = uploadedFiles[index];
+    onRemove?.(fileToRemove, index);
+  }, [uploadedFiles, onRemove]);
+  const isUploading = files.some(f => {
+    return f.status === "uploading";
+  });
+  const isMaxFilesReached = files.length >= maxFiles;
+  const fileListNode = React.useMemo(() => {
+    if (!showFileList || files.length === 0 && uploadedFiles.length === 0) return null;
+    if (FileListComponent) return /* @__PURE__ */jsx(FileListComponent, {
+      files: uploadedFiles,
+      onRemove: handleRemoveFile
+    });
+    return /* @__PURE__ */jsx(Stack, {
+      sx: {
+        gap: 1,
+        width: "100%"
+      },
+      children: uploadedFiles.map((file, index) => {
+        return /* @__PURE__ */jsxs(Flex, {
+          sx: {
+            width: "full",
+            alignItems: "center",
+            justifyContent: "space-between",
+            p: 2,
+            backgroundColor: "display.background.secondary.default",
+            borderRadius: "md",
+            gap: 2
+          },
+          children: [/* @__PURE__ */jsxs(Flex, {
+            sx: {
+              alignItems: "center",
+              gap: 2,
+              flex: 1
+            },
+            children: [file.imageUrl && /* @__PURE__ */jsx(Box, {
+              sx: {
+                width: 32,
+                height: 32
+              },
+              children: /* @__PURE__ */jsx("img", {
+                src: file.imageUrl,
+                alt: file.name,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                  borderRadius: 4
+                }
+              })
+            }), /* @__PURE__ */jsx(Box, {
+              sx: {
+                flex: 1
+              },
+              children: /* @__PURE__ */jsx("a", {
+                href: file.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: {
+                  textDecoration: "none",
+                  color: "inherit"
+                },
+                children: /* @__PURE__ */jsx(Text, {
+                  variant: "body",
+                  sx: {
+                    fontWeight: "medium",
+                    "&:hover": {
+                      textDecoration: "underline",
+                      color: "primary.default"
+                    }
+                  },
+                  children: file.name
+                })
+              })
+            })]
+          }), /* @__PURE__ */jsx(Button, {
+            variant: "destructive",
+            onClick: () => {
+              return handleRemoveFile(index);
+            },
+            sx: {
+              fontSize: "sm",
+              color: "text.muted",
+              "&:hover": {
+                color: "error.default"
+              }
+            },
+            children: intl.formatMessage({
+              id: "G/yZLu",
+              defaultMessage: [{
+                "type": 0,
+                "value": "Remove"
+              }]
+            })
+          })]
+        }, file.id);
+      })
+    });
+  }, [files.length, uploadedFiles, handleRemoveFile, intl, showFileList, FileListComponent]);
+  const placeholderTexts = React.useMemo(() => {
+    const texts = [];
+    if (isUploading) texts.push(intl.formatMessage({
+      id: "JEsxDw",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Uploading..."
+      }]
+    }));else if (isMaxFilesReached) texts.push(intl.formatMessage({
+      id: "eRShvB",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Maximum files reached"
+      }]
+    }));else texts.push(placeholder || intl.formatMessage({
+      id: "gy0Ynb",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Click or drag files here"
+      }]
+    }));
+    if (!isUploading && !isMaxFilesReached) {
+      if (accept) texts.push(accept);
+      if (maxSize) texts.push(`Max ${formatFileSize(maxSize)}`);
+      if (multiple && maxFiles) texts.push(intl.formatMessage({
+        id: "fOOwej",
+        defaultMessage: [{
+          "type": 6,
+          "value": "max_files",
+          "options": {
+            "one": {
+              "value": [{
+                "type": 0,
+                "value": "Up to "
+              }, {
+                "type": 7
+              }, {
+                "type": 0,
+                "value": " file"
+              }]
+            },
+            "other": {
+              "value": [{
+                "type": 0,
+                "value": "Up to "
+              }, {
+                "type": 7
+              }, {
+                "type": 0,
+                "value": " files"
+              }]
+            }
+          },
+          "offset": 0,
+          "pluralType": "cardinal"
+        }]
+      }, {
+        max_files: maxFiles
+      }));
+    }
+    return texts.filter(Boolean).join(" • ");
+  }, [isUploading, isMaxFilesReached, intl, placeholder, accept, maxSize, multiple, maxFiles]);
+  return /* @__PURE__ */jsxs(Stack, {
+    sx: {
+      gap: 3,
+      justifyContent: "stretch",
+      width: "100%"
+    },
+    children: [/* @__PURE__ */jsxs(Box, {
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onClick: handleClick,
+      sx: {
+        width: "100%",
+        border: "2px dashed",
+        borderColor: error ? "error.default" : isDragOver ? "primary.default" : "display.border.muted.default",
+        borderRadius: "xl",
+        padding: 6,
+        textAlign: "center",
+        cursor: disabled || isUploading || isMaxFilesReached ? "not-allowed" : "pointer",
+        backgroundColor: isDragOver ? "primary.muted" : "display.background.secondary.default",
+        transition: "all 0.2s ease",
+        opacity: disabled || isMaxFilesReached ? .6 : 1,
+        "&:hover": {
+          borderColor: !disabled && !isUploading && !error && !isMaxFilesReached ? "primary.default" : void 0,
+          backgroundColor: !disabled && !isUploading && !isMaxFilesReached ? "primary.muted" : void 0
+        }
+      },
+      children: [/* @__PURE__ */jsx("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept,
+        multiple,
+        onChange: handleFileChange,
+        disabled: disabled || isUploading || isMaxFilesReached,
+        style: {
+          display: "none"
+        }
+      }), children || /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 3,
+          justifyContent: "center"
+        },
+        children: [/* @__PURE__ */jsx(Text, {
+          sx: {
+            fontSize: "2xl"
+          },
+          children: intl.formatMessage({
+            id: "XKyo5X",
+            defaultMessage: [{
+              "type": 0,
+              "value": "File Upload"
+            }]
+          })
+        }), /* @__PURE__ */jsx(Box, {
+          sx: {
+            textAlign: "center"
+          },
+          children: /* @__PURE__ */jsx(Text, {
+            variant: "body",
+            sx: {
+              color: "text.default",
+              mb: 1
+            },
+            children: placeholderTexts
+          })
+        }), !isUploading && !isMaxFilesReached && /* @__PURE__ */jsx(Button, {
+          variant: "secondary",
+          disabled,
+          children: intl.formatMessage({
+            id: "fDCMA6",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Select Files"
+            }]
+          })
+        })]
+      })]
+    }), error && /* @__PURE__ */jsx(Text, {
+      variant: "caption",
+      sx: {
+        color: "error.default"
+      },
+      children: error
+    }), fileListNode]
+  });
+};
+
+//#endregion
+//#region src/components/InstallPwa/InstallPwa.tsx
+var InstallPwaUi = ({
+  onInstall
+}) => {
+  return /* @__PURE__ */jsx(Flex, {
+    sx: {
+      position: "absolute",
+      bottom: 4,
+      width: "100%",
+      justifyContent: "center"
+    },
+    children: /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        backgroundColor: "background",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 3,
+        width: "auto",
+        border: "1px solid",
+        borderColor: "muted",
+        borderRadius: 1,
+        padding: 4
+      },
+      children: [/* @__PURE__ */jsx(Text, {
+        children: "Deseja instalar o nosso aplicativo?"
+      }), /* @__PURE__ */jsx(Button, {
+        onClick: onInstall,
+        children: "Instalar"
+      })]
+    })
+  });
+};
+var InstallPwa = () => {
+  const [supportsPwa, setSupportsPwa] = React.useState(false);
+  const [promptInstall, setPromptInstall] = React.useState(null);
+  React.useEffect(() => {
+    const handler = e => {
+      e.preventDefault();
+      setSupportsPwa(true);
+      setPromptInstall(e);
+    };
+    window.addEventListener("beforeinstallprompt", handler);
+    return () => {
+      return window.removeEventListener("transitionend", handler);
+    };
+  }, []);
+  const onInstall = e => {
+    e.preventDefault();
+    if (!promptInstall) return;
+    promptInstall.prompt();
+  };
+  if (!supportsPwa) return null;
+  return /* @__PURE__ */jsx(InstallPwaUi, {
+    onInstall
+  });
+};
+
+//#endregion
+//#region src/components/List/List.tsx
+var List = React.forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */jsx("ul", {
+    ...props,
+    ref,
+    children
+  });
+});
+List.displayName = "List";
+
+//#endregion
+//#region src/components/List/ListItem.tsx
+var ListItem = React.forwardRef((props, ref) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return /* @__PURE__ */jsx("li", {
+    ...rest,
+    ref,
+    children
+  });
+});
+ListItem.displayName = "ListItem";
+
+//#endregion
+//#region src/components/SpotlightCard/SpotlightCard.tsx
+var SpotlightCard = ({
+  icon,
+  title,
+  badge,
+  description,
+  firstButton,
+  secondButton,
+  variant = "accent"
+}) => {
+  const gradientFlow = keyframes({
+    "0%": {
+      backgroundPosition: "0% 50%"
+    },
+    "50%": {
+      backgroundPosition: "100% 50%"
+    },
+    "100%": {
+      backgroundPosition: "0% 50%"
+    }
+  });
+  const hasButtons = !!firstButton || !!secondButton;
+  const isAccent = variant === "accent";
+  const textColorToken = isAccent ? "action.text.accent.default" : "action.text.primary.default";
+  const iconColorToken = isAccent ? "action.text.accent.default" : "display.text.accent.default";
+  const iconBgToken = isAccent ? "rgba(255,255,255,0.3)" : "action.background.secondary.default";
+  const badgeBgToken = isAccent ? "action.background.primary.default" : "action.background.accent.default";
+  const badgeTextToken = isAccent ? "action.text.primary.default" : "action.text.accent.default";
+  const btnPrimaryVariant = isAccent ? "primary" : "accent";
+  const btnPrimaryColorToken = isAccent ? "action.text.primary.default" : "action.text.accent.default";
+  const btnSecondaryColorToken = textColorToken;
+  const btnSecondaryBorderColorToken = isAccent ? "currentColor" : "display.border.muted.default";
+  const renderButton = (prop, config) => {
+    if (!prop) return null;
+    if (React.isValidElement(prop)) return prop;
+    if (typeof prop !== "object") return prop;
+    const {
+      sx,
+      ...rest
+    } = prop;
+    const {
+      variant: defaultVariant,
+      textColor,
+      styles = {}
+    } = config;
+    return /* @__PURE__ */jsx(Button, {
+      variant: defaultVariant,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "2",
+        px: "6",
+        py: "3",
+        fontSize: "15px",
+        fontWeight: "bold",
+        whiteSpace: "nowrap",
+        transition: "all 0.2s",
+        color: textColor,
+        ...styles,
+        ...sx
+      },
+      ...rest
+    });
+  };
+  return /* @__PURE__ */jsxs(Card, {
+    sx: {
+      display: "flex",
+      flexDirection: ["row"],
+      flexWrap: "nowrap",
+      alignItems: "center",
+      justifyContent: "space-between",
+      background: t => {
+        const theme = t;
+        const bgStart = isAccent ? theme.colors?.action?.background?.accent?.default : theme.colors?.action?.background?.primary?.default;
+        const bgMiddle = isAccent ? theme.colors?.action?.background?.accent?.active : theme.colors?.action?.background?.secondary?.default;
+        if (isAccent) return `linear-gradient(270deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%), 
+                    linear-gradient(0deg, ${bgStart}, ${bgStart})`;
+        return `linear-gradient(270deg, ${bgStart}, ${bgMiddle}, ${bgStart})`;
+      },
+      backgroundSize: isAccent ? "200% 100%, auto" : "400% 400%",
+      animation: `${gradientFlow} 6s ease infinite`,
+      width: "100%",
+      minHeight: "104px",
+      borderRadius: "xl",
+      boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
+      py: "7",
+      px: "8",
+      gap: "5",
+      color: textColorToken,
+      overflow: "hidden",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: isAccent ? "transparent" : "display.border.muted.default"
+    },
+    "data-testid": "spotlight-card",
+    children: [/* @__PURE__ */jsxs(Flex, {
+      sx: {
+        alignItems: "center",
+        gap: "5",
+        flex: 1,
+        minWidth: 0
+      },
+      children: [/* @__PURE__ */jsx(Box, {
+        sx: {
+          width: 64,
+          height: 64,
+          borderRadius: "2xl",
+          backgroundColor: iconBgToken,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          color: iconColorToken
+        },
+        children: /* @__PURE__ */jsx(Icon, {
+          icon,
+          width: 32
+        })
+      }), /* @__PURE__ */jsxs(Box, {
+        sx: {
+          minWidth: 0
+        },
+        children: [/* @__PURE__ */jsxs(Text, {
+          as: "div",
+          sx: {
+            fontFamily: "mono",
+            fontSize: "32px",
+            lineHeight: 1.1,
+            color: "inherit",
+            whiteSpace: "nowrap",
+            display: "flex",
+            alignItems: "center",
+            gap: "3"
+          },
+          children: [title, badge && /* @__PURE__ */jsx(Box, {
+            as: "span",
+            sx: {
+              backgroundColor: badgeBgToken,
+              color: badgeTextToken,
+              fontFamily: "mono",
+              fontWeight: "bold",
+              fontSize: "11px",
+              lineHeight: 1,
+              paddingX: "6px",
+              paddingY: "3px",
+              borderRadius: "md",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em",
+              display: "inline-flex",
+              alignItems: "center",
+              boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+              transform: "translateY(3px)"
+            },
+            children: badge
+          })]
+        }), /* @__PURE__ */jsx(Text, {
+          as: "div",
+          sx: {
+            fontFamily: "body",
+            fontWeight: 400,
+            fontSize: "16px",
+            color: "inherit",
+            opacity: .9,
+            mt: "1",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            display: "-webkit-box",
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: "vertical"
+          },
+          children: description
+        })]
+      })]
+    }), hasButtons && /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        gap: "4",
+        alignItems: "center",
+        flexShrink: 0,
+        ml: "auto"
+      },
+      children: [renderButton(firstButton, {
+        variant: btnPrimaryVariant,
+        textColor: btnPrimaryColorToken,
+        styles: {
+          ":hover": {
+            transform: "translateY(-1px)"
+          }
+        }
+      }), renderButton(secondButton, {
+        variant: "secondary",
+        textColor: btnSecondaryColorToken,
+        styles: {
+          backgroundColor: "transparent",
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: btnSecondaryBorderColorToken,
+          opacity: isAccent ? .6 : 1,
+          cursor: "pointer",
+          ":hover": {
+            backgroundColor: "rgba(255,255,255,0.2)",
+            opacity: 1,
+            borderColor: btnSecondaryBorderColorToken
+          }
+        }
+      })]
+    })]
+  });
+};
+SpotlightCard.displayName = "SpotlightCard";
+
+//#endregion
+//#region src/components/LockedOverlay/LockedOverlay.tsx
+/**
+* LockedOverlay is a component for blocking and displaying locked features or restricted content
+* within a specific container.
+*
+* This component renders as an absolutely positioned overlay that blocks the parent container's content.
+* The parent container must have `position: relative` for proper positioning.
+*
+* Unlike a modal, this component blocks only its parent container, not the entire viewport,
+* making it ideal for blocking specific sections like Layout.Main, Layout.Main.Body, etc.
+*
+* @example
+* ```tsx
+* // Parent container must have position: relative
+* <Layout.Main sx={{ position: 'relative' }}>
+*   <LockedOverlay
+*     isOpen={isOpen}
+*     onRequestClose={() => setIsOpen(false)}
+*     header={{
+*       icon: "fluent:lock-closed-24-filled",
+*       title: "Premium Feature",
+*       description: "Available in Pro plan only",
+*       variant: "primary"
+*     }}
+*     actions={[
+*       {
+*         label: "Upgrade Now",
+*         icon: "fluent-emoji-high-contrast:sparkles",
+*         variant: "primary",
+*         onClick: handleUpgrade
+*       },
+*       {
+*         label: "Learn More",
+*         icon: "fluent:arrow-right-16-regular",
+*         variant: "accent",
+*         onClick: handleLearnMore
+*       }
+*     ]}
+*   >
+*     <Text>This feature is only available for Pro users.</Text>
+*   </LockedOverlay>
+* </Layout.Main>
+* ```
+*
+* @example
+* ```tsx
+* // Blocking a specific section with custom zIndex
+* <Box sx={{ position: 'relative' }}>
+*   <LockedOverlay
+*     isOpen={isOpen}
+*     zIndex={10}
+*     header={{
+*       icon: "fluent:lock-closed-24-filled",
+*       title: "Feature Locked",
+*       description: "Unlock this feature"
+*     }}
+*   >
+*     <Text>Content here</Text>
+*   </LockedOverlay>
+* </Box>
+* ```
+*/
+var LockedOverlay = ({
+  isOpen,
+  onRequestClose,
+  header,
+  firstButton,
+  secondButton,
+  children,
+  actions,
+  sx,
+  zIndex = 1
+}) => {
+  const content = /* @__PURE__ */jsxs(Card, {
+    className: "lockedoverlay-card",
+    role: "dialog",
+    "aria-modal": true,
+    sx: {
+      width: "full",
+      maxWidth: "620px",
+      borderRadius: "lg",
+      overflow: "auto",
+      border: "none",
+      boxShadow: "none"
+    },
+    children: [/* @__PURE__ */jsx(Flex, {
+      sx: {
+        width: "full",
+        paddingX: "6",
+        paddingY: "4"
+      },
+      children: /* @__PURE__ */jsx(SpotlightCard, {
+        icon: header.icon,
+        title: header.title,
+        description: header.description,
+        variant: header.variant || "primary",
+        firstButton,
+        secondButton
+      })
+    }), /* @__PURE__ */jsxs(Card.Body, {
+      sx: {
+        px: ["5", "7"],
+        py: ["6", "7"],
+        gap: "6",
+        width: "full"
+      },
+      children: [children, actions && actions.length > 0 && /* @__PURE__ */jsx(Card.Footer, {
+        children: /* @__PURE__ */jsx(Flex, {
+          className: "lockedoverlay-footer",
+          sx: {
+            flexDirection: "column",
+            gap: "4",
+            alignItems: "center",
+            width: "full",
+            paddingX: "6",
+            marginTop: "8"
+          },
+          children: actions.map((action, index) => {
+            return /* @__PURE__ */jsxs(Button, {
+              variant: action.variant,
+              onClick: action.onClick,
+              sx: {
+                width: "full",
+                justifyContent: "center"
+              },
+              children: [action.icon && /* @__PURE__ */jsx(Icon, {
+                icon: action.icon
+              }), action.label]
+            }, index);
+          })
+        })
+      })]
+    })]
+  });
+  if (!isOpen) return null;
+  return /* @__PURE__ */jsx(Flex, {
+    "data-testid": "lockedoverlay-overlay",
+    onClick: () => {
+      return onRequestClose?.();
+    },
+    sx: {
+      position: "absolute",
+      inset: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex,
+      ...sx
+    },
+    children: /* @__PURE__ */jsx(Flex, {
+      onClick: event => {
+        event.stopPropagation();
+      },
+      sx: {
+        width: "full",
+        maxWidth: ["95%", "90%", "620px"],
+        maxHeight: "90%",
+        justifyContent: "center",
+        overflow: "auto"
+      },
+      children: content
+    })
+  });
+};
+
+//#endregion
+//#region src/components/Markdown/Markdown.tsx
+var Markdown = ({
+  children,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx(BaseStyles, {
+    sx,
+    children: /* @__PURE__ */jsx(ReactMarkdown, {
+      rehypePlugins: [rehypeRaw],
+      remarkPlugins: [remarkGfm],
+      ...props,
+      children
+    })
+  });
+};
+
+//#endregion
+//#region src/components/Menu/Menu.tsx
+var Menu = ({
+  children,
+  sx,
+  menuIcon = "menu-open"
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [stylePos, setStylePos] = React.useState({});
+  const triggerRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const toggle = () => {
+    return setIsOpen(v => {
+      return !v;
+    });
+  };
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const onDocClick = e => {
+      const t = e.target;
+      if (panelRef.current && !panelRef.current.contains(t) && triggerRef.current && !triggerRef.current.contains(t)) setIsOpen(false);
+    };
+    document.addEventListener("mousedown", onDocClick);
+    return () => {
+      return document.removeEventListener("mousedown", onDocClick);
+    };
+  }, [isOpen]);
+  React.useLayoutEffect(() => {
+    if (!isOpen) return;
+    let rafId = 0;
+    const getWidth = () => {
+      const w = sx?.width ?? sx?.maxWidth ?? sx?.minWidth;
+      return Array.isArray(w) ? w[w.length - 1] : w;
+    };
+    const compute = () => {
+      const trigger = triggerRef.current;
+      const panel = panelRef.current;
+      if (!trigger || !panel) return;
+      const width = getWidth();
+      if (width) panel.style.width = typeof width === "number" ? `${width}px` : String(width);
+      const tr = trigger.getBoundingClientRect();
+      const pr = panel.getBoundingClientRect();
+      const vw = window.innerWidth,
+        vh = window.innerHeight,
+        m = 8;
+      if (pr.width === 0) {
+        rafId = requestAnimationFrame(compute);
+        return;
+      }
+      const left = Math.max(m, Math.min(tr.left + tr.width / 2 - pr.width / 2, vw - pr.width - m));
+      const top = vh - tr.bottom < pr.height + m ? Math.max(m, tr.top - pr.height - m) : tr.bottom + m;
+      setStylePos({
+        position: "fixed",
+        left: `${left}px`,
+        top: `${top}px`,
+        zIndex: 9999,
+        ...(width && {
+          width: typeof width === "number" ? `${width}px` : String(width)
+        })
+      });
+    };
+    rafId = requestAnimationFrame(compute);
+    const onResizeScroll = () => {
+      return rafId = requestAnimationFrame(compute);
+    };
+    window.addEventListener("resize", onResizeScroll);
+    window.addEventListener("scroll", onResizeScroll, true);
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", onResizeScroll);
+      window.removeEventListener("scroll", onResizeScroll, true);
+    };
+  }, [isOpen, sx]);
+  const panel = isOpen ? /* @__PURE__ */jsx(Flex, {
+    ref: panelRef,
+    sx: {
+      width: ["280px", "320px"],
+      maxHeight: "400px",
+      flexDirection: "column",
+      gap: "3",
+      padding: "3",
+      backgroundColor: "input.background.muted.default",
+      borderRadius: "xl",
+      boxShadow: "xl",
+      overflowY: "auto",
+      border: "md",
+      borderColor: "display.border.muted.default",
+      ...sx
+    },
+    style: {
+      pointerEvents: "auto",
+      ...stylePos
+    },
+    children: /* @__PURE__ */jsx(Box, {
+      as: "nav",
+      children
+    })
+  }) : null;
+  return /* @__PURE__ */jsx(Flex, {
+    sx: {
+      position: "relative",
+      display: "inline-block"
+    },
+    children: /* @__PURE__ */jsxs(Box, {
+      sx: {
+        position: "relative"
+      },
+      children: [/* @__PURE__ */jsx("button", {
+        ref: triggerRef,
+        onClick: toggle,
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen,
+        style: {
+          background: "transparent",
+          border: 0,
+          padding: 4,
+          cursor: "pointer",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */jsx(Icon, {
+          icon: menuIcon
+        })
+      }), isOpen && panel]
+    })
+  });
+};
+
+//#endregion
+//#region src/components/MetricCard/MetricCard.tsx
+var messages = defineMessages({
+  ofMax: {
+    id: "oYpm71",
+    defaultMessage: [{
+      "type": 0,
+      "value": "of "
+    }, {
+      "type": 1,
+      "value": "max"
+    }]
+  },
+  percentageUsed: {
+    id: "zr0OS6",
+    defaultMessage: [{
+      "type": 1,
+      "value": "percentage"
+    }, {
+      "type": 0,
+      "value": "% used"
+    }]
+  },
+  unlimited: {
+    id: "rskBv4",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Unlimited"
+    }]
+  },
+  infinity: {
+    id: "0EjvY6",
+    defaultMessage: [{
+      "type": 0,
+      "value": "∞"
+    }]
+  },
+  nearLimit: {
+    id: "1DbX9V",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Near limit"
+    }]
+  },
+  reachedLimit: {
+    id: "4NwCn9",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Reached limit"
+    }]
+  }
+});
+/**
+* Icon wrapper for metric cards.
+*/
+var MetricIconWrapper = ({
+  icon
+}) => {
+  return /* @__PURE__ */jsx(Flex, {
+    sx: {
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "full",
+      border: "md",
+      borderColor: "display.border.muted.default",
+      backgroundColor: "display.background.muted.default",
+      color: "display.text.secondary.default",
+      width: "48px",
+      height: "48px",
+      flexShrink: 0
+    },
+    children: icon && /* @__PURE__ */jsx(Icon, {
+      icon
+    })
+  });
+};
+/**
+* Card header with label, tooltip, and optional clickable icon.
+*/
+var MetricCardHeader = ({
+  label,
+  tooltip,
+  isClickable
+}) => {
+  const isTooltipAction = typeof tooltip === "function";
+  const tooltipText = typeof tooltip === "string" ? tooltip : void 0;
+  return /* @__PURE__ */jsxs(Flex, {
+    sx: {
+      alignItems: "center",
+      gap: "2"
+    },
+    children: [/* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "sm",
+        fontWeight: "medium",
+        color: "display.text.secondary.default"
+      },
+      children: label
+    }), tooltipText && /* @__PURE__ */jsx(TooltipIcon, {
+      icon: "fluent:info-24-regular",
+      tooltip: {
+        children: tooltipText
+      },
+      variant: "info"
+    }), isTooltipAction && /* @__PURE__ */jsx(Text, {
+      onClick: e => {
+        e.stopPropagation();
+        tooltip();
+      },
+      sx: {
+        fontSize: "sm",
+        color: "display.text.secondary.default",
+        cursor: "pointer",
+        ":hover": {
+          color: "action.text.primary.default"
+        }
+      },
+      children: /* @__PURE__ */jsx(Icon, {
+        icon: "fluent:info-24-regular",
+        inline: true
+      })
+    }), isClickable && /* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "sm",
+        color: "display.text.secondary.default"
+      },
+      children: /* @__PURE__ */jsx(Icon, {
+        icon: "fluent:open-24-regular",
+        inline: true
+      })
+    })]
+  });
+};
+/**
+* Renders the content for a date metric.
+*/
+var DateMetricContent = ({
+  metric
+}) => {
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "2xl",
+        fontWeight: "bold",
+        color: "display.text.primary.default"
+      },
+      children: metric.date
+    }), metric.remainingDaysMessage && /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        alignItems: "center",
+        gap: "2"
+      },
+      children: [/* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "sm",
+          color: metric.isWarning ? "feedback.text.caution.default" : "display.text.secondary.default"
+        },
+        children: /* @__PURE__ */jsx(Icon, {
+          icon: metric.isWarning ? "fluent:warning-24-regular" : "fluent:clock-24-regular",
+          inline: true
+        })
+      }), /* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "sm",
+          color: metric.isWarning ? "feedback.text.caution.default" : "display.text.secondary.default"
+        },
+        children: metric.remainingDaysMessage
+      })]
+    })]
+  });
+};
+/**
+* Renders the content for a percentage metric.
+*/
+var PercentageMetricContent = ({
+  metric
+}) => {
+  const {
+    intl
+  } = useI18n();
+  const percentage = metric.max === null || metric.max <= 0 ? null : Math.min(Math.round(metric.current / metric.max * 100), 100);
+  const formatValue = metric.formatValue || (val => {
+    return val.toString();
+  });
+  const showAlert = percentage !== null && metric.showAlertThreshold !== void 0 && percentage >= metric.showAlertThreshold;
+  const isOverLimit = percentage !== null && percentage >= 100;
+  const maxText = metric.max !== null ? formatValue(metric.max) : intl.formatMessage(messages.infinity);
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsxs(Flex, {
+      sx: {
+        alignItems: "baseline",
+        justifyContent: "space-between",
+        gap: "2"
+      },
+      children: [/* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "2xl",
+          fontWeight: "bold",
+          color: "display.text.primary.default"
+        },
+        children: formatValue(metric.current)
+      }), /* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "sm",
+          color: "display.text.secondary.default"
+        },
+        children: intl.formatMessage(messages.ofMax, {
+          max: maxText
+        })
+      })]
+    }), /* @__PURE__ */jsx(Box, {
+      sx: {
+        width: "full",
+        height: "8px",
+        backgroundColor: "display.background.secondary.default",
+        borderRadius: "full",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */jsx(Box, {
+        sx: {
+          height: "full",
+          width: percentage !== null ? `${percentage}%` : "100%",
+          backgroundColor: "action.background.primary.default",
+          borderRadius: "full",
+          transition: "width 0.5s ease-out"
+        }
+      })
+    }), /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        fontSize: "xs"
+      },
+      children: [/* @__PURE__ */jsx(Text, {
+        sx: {
+          color: "display.text.secondary.default"
+        },
+        children: percentage !== null ? intl.formatMessage(messages.percentageUsed, {
+          percentage
+        }) : intl.formatMessage(messages.unlimited)
+      }), showAlert && !isOverLimit && /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          alignItems: "center",
+          gap: "1",
+          color: "feedback.text.caution.default"
+        },
+        children: [/* @__PURE__ */jsx(Icon, {
+          icon: "fluent:warning-24-regular"
+        }), /* @__PURE__ */jsx(Text, {
+          sx: {
+            fontWeight: "medium"
+          },
+          children: intl.formatMessage(messages.nearLimit)
+        })]
+      }), showAlert && isOverLimit && /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          alignItems: "center",
+          gap: "1",
+          color: "feedback.text.negative.default"
+        },
+        children: [/* @__PURE__ */jsx(Icon, {
+          icon: "fluent:warning-24-regular"
+        }), /* @__PURE__ */jsx(Text, {
+          sx: {
+            fontWeight: "medium",
+            color: "feedback.text.negative.default"
+          },
+          children: intl.formatMessage(messages.reachedLimit)
+        })]
+      })]
+    })]
+  });
+};
+/**
+* Renders the content for a number metric.
+*/
+var NumberMetricContent = ({
+  metric
+}) => {
+  const {
+    intl
+  } = useI18n();
+  const formatValue = metric.formatValue || (val => {
+    return val.toString();
+  });
+  const maxText = metric.max !== null ? formatValue(metric.max) : intl.formatMessage(messages.infinity);
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsxs(Flex, {
+      sx: {
+        alignItems: "baseline",
+        gap: "3"
+      },
+      children: [/* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "2xl",
+          fontWeight: "bold",
+          color: "display.text.primary.default"
+        },
+        children: formatValue(metric.current)
+      }), /* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "sm",
+          color: "display.text.secondary.default"
+        },
+        children: intl.formatMessage(messages.ofMax, {
+          max: maxText
+        })
+      })]
+    }), metric.footerText && /* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "xs",
+        color: "display.text.secondary.default",
+        lineHeight: "relaxed",
+        maxWidth: "300px"
+      },
+      children: metric.footerText
+    })]
+  });
+};
+/**
+* MetricCard component displays a metric in a consistent card layout.
+*
+* It supports three metric types:
+* - **date**: displays a date and optional remaining-days message
+* - **percentage**: displays current/max values and a progress bar
+* - **number**: displays current/max values and an optional footer text
+*
+* @example
+* ```tsx
+* <MetricCard
+*   metric={{
+*     type: 'date',
+*     label: 'Renewal date',
+*     date: '31/12/2025',
+*     icon: 'fluent:calendar-24-regular',
+*     remainingDaysMessage: '10 days remaining',
+*   }}
+* />
+* ```
+*
+* @example
+* ```tsx
+* <MetricCard
+*   metric={{
+*     type: 'percentage',
+*     label: 'Plan usage',
+*     current: 350,
+*     max: 1000,
+*     icon: 'fluent:gauge-24-regular',
+*     showAlertThreshold: 80,
+*   }}
+* />
+* ```
+*/
+var MetricCard = ({
+  metric,
+  isLoading = false
+}) => {
+  if (isLoading) return null;
+  const isClickable = Boolean(metric.onClick || metric.helpArticleAction);
+  return /* @__PURE__ */jsx(Card, {
+    onClick: metric.onClick || metric.helpArticleAction,
+    sx: {
+      backgroundColor: "display.background.muted.default",
+      padding: "6",
+      cursor: isClickable ? "pointer" : "default",
+      transition: "all 0.2s ease",
+      minWidth: ["full", "full", "400px"],
+      ":hover": {
+        transform: "scale(1.01)"
+      }
+    },
+    children: /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        gap: "4",
+        width: "full"
+      },
+      children: [/* @__PURE__ */jsx(MetricIconWrapper, {
+        icon: metric.icon
+      }), /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          flex: 1,
+          flexDirection: "column",
+          gap: "2"
+        },
+        children: [/* @__PURE__ */jsx(MetricCardHeader, {
+          label: metric.label,
+          tooltip: metric.tooltip,
+          isClickable
+        }), metric.type === "date" && /* @__PURE__ */jsx(DateMetricContent, {
+          metric
+        }), metric.type === "percentage" && /* @__PURE__ */jsx(PercentageMetricContent, {
+          metric
+        }), metric.type === "number" && /* @__PURE__ */jsx(NumberMetricContent, {
+          metric
+        })]
+      })]
+    })
+  });
+};
+
+//#endregion
+//#region src/components/Modal/Modal.tsx
+ReactModal.defaultStyles = {
+  overlay: {},
+  content: {}
+};
+var Modal = props => {
+  const {
+    theme
+  } = useTheme();
+  const space = theme.space;
+  const padding = useResponsiveValue([space?.["4"], space?.["5"], space?.["5"]]) || 0;
+  const style = {
+    overlay: css({
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: "modal",
+      ...props.style?.overlay
+    })(theme),
+    content: css({
+      /**
+      * Theme
+      */
+      backgroundColor: "surface",
+      padding,
+      border: "default",
+      borderColor: "surface",
+      borderRadius: "default",
+      /**
+      * General
+      */
+      WebkitOverflowScrolling: "touch",
+      overflow: "auto",
+      position: "relative",
+      top: "0px",
+      left: "0px",
+      right: "0px",
+      bottom: "0px",
+      maxHeight: "90%",
+      maxWidth: "90%",
+      ...props.style?.content
+    })(theme)
+  };
+  return /* @__PURE__ */jsx(ReactModal, {
+    ...props,
+    style
+  });
+};
+Modal.setAppElement = ReactModal.setAppElement;
+
+//#endregion
+//#region src/components/NavList/NavList.tsx
+var getVariantStyles = variant => {
+  switch (variant) {
+    case "sidebar":
+      return {
+        container: {
+          flexDirection: "column",
+          gap: "1",
+          width: "full"
+        },
+        item: {
+          backgroundColor: "transparent",
+          padding: "3",
+          borderRadius: "none",
+          fontSize: "md",
+          transition: "background-color 0.15s ease",
+          "&:hover": {
+            backgroundColor: "navigation.background.muted.hover",
+            textDecoration: "none"
+          }
+        },
+        activeItem: {
+          backgroundColor: "navigation.background.muted.default",
+          borderLeft: "4px solid",
+          borderColor: "navigation.border.primary.default",
+          paddingLeft: "calc(0.75rem - 4px)"
+        },
+        icon: {
+          size: 20
+        },
+        groupLabel: {
+          fontSize: "xs",
+          fontWeight: "bold",
+          color: "navigation.text.muted.default",
+          textTransform: "uppercase",
+          marginBottom: "2",
+          marginTop: "4"
+        }
+      };
+    case "menu":
+      return {
+        container: {
+          flexDirection: "column",
+          gap: "1",
+          width: "full"
+        },
+        item: {
+          backgroundColor: "transparent",
+          borderRadius: "md",
+          padding: "2",
+          fontSize: "md",
+          transition: "all 0.2s ease",
+          "&:hover": {
+            backgroundColor: "navigation.background.muted.hover",
+            transform: "translateX(4px)",
+            textDecoration: "none"
+          }
+        },
+        activeItem: {
+          backgroundColor: "navigation.background.muted.default",
+          fontWeight: "bold"
+        },
+        icon: {
+          size: 18
+        },
+        groupLabel: {
+          fontSize: "sm",
+          fontWeight: "semibold",
+          color: "display.text.secondary.default",
+          marginBottom: "2",
+          marginTop: "3"
+        }
+      };
+    case "dropdown":
+      return {
+        container: {
+          flexDirection: "column",
+          gap: "1",
+          width: "full"
+        },
+        item: {
+          backgroundColor: "transparent",
+          padding: "2",
+          fontSize: "sm",
+          borderBottom: "sm",
+          borderColor: "display.border.muted.default",
+          transition: "background-color 0.1s ease",
+          "&:hover": {
+            backgroundColor: "navigation.background.muted.hover",
+            textDecoration: "none"
+          }
+        },
+        activeItem: {
+          backgroundColor: "navigation.background.muted.default",
+          fontWeight: "semibold"
+        },
+        icon: {
+          size: 16
+        },
+        groupLabel: {
+          fontSize: "xs",
+          fontWeight: "medium",
+          color: "display.text.secondary.default",
+          marginBottom: "1",
+          marginTop: "2",
+          paddingX: "2"
+        }
+      };
+    default:
+      return getVariantStyles("menu");
+  }
+};
+var NavListItemComponent = ({
+  item,
+  onItemClick,
+  variantStyles,
+  iconSize,
+  LinkComponent = Link,
+  showDivider = false
+}) => {
+  const handleClick = event => {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    item.onClick?.(event);
+    onItemClick?.(item);
+  };
+  const itemStyles = {
+    ...variantStyles.item,
+    ...(item.active ? variantStyles.activeItem : {}),
+    ...(item.disabled ? {
+      opacity: .5,
+      cursor: "not-allowed",
+      pointerEvents: "none"
+    } : {})
+  };
+  const isDefaultLink = LinkComponent === Link;
+  const linkContent = /* @__PURE__ */jsxs(Flex, {
+    sx: {
+      alignItems: "center",
+      gap: "2",
+      color: "navigation.text.primary.default"
+    },
+    children: [item.icon && /* @__PURE__ */jsx(Icon, {
+      icon: item.icon,
+      width: iconSize ?? variantStyles.icon.size,
+      height: iconSize ?? variantStyles.icon.size
+    }), /* @__PURE__ */jsx(Text, {
+      children: item.label
+    })]
+  });
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [isDefaultLink ? /* @__PURE__ */jsx(LinkComponent, {
+      href: item.href,
+      onClick: handleClick,
+      sx: itemStyles,
+      "aria-disabled": item.disabled,
+      "aria-current": item.active ? "page" : void 0,
+      quiet: true,
+      children: linkContent
+    }) : /* @__PURE__ */jsx(Link, {
+      as: LinkComponent,
+      href: item.href,
+      onClick: handleClick,
+      sx: itemStyles,
+      "aria-disabled": item.disabled,
+      "aria-current": item.active ? "page" : void 0,
+      quiet: true,
+      children: linkContent
+    }), showDivider && /* @__PURE__ */jsx(Divider, {
+      sx: {
+        marginY: "2"
+      }
+    })]
+  });
+};
+var NavList = ({
+  items = [],
+  groups = [],
+  variant = "menu",
+  onItemClick,
+  sx,
+  iconSize,
+  LinkComponent
+}) => {
+  const variantStyles = getVariantStyles(variant);
+  const processedGroups = React.useMemo(() => {
+    if (groups.length > 0) return groups;
+    if (items.length > 0) {
+      const groupedItems = items.reduce((acc, item) => {
+        const groupKey = item.group || "__ungrouped__";
+        if (!acc[groupKey]) acc[groupKey] = [];
+        acc[groupKey].push(item);
+        return acc;
+      }, {});
+      return Object.entries(groupedItems).map(([key, groupItems]) => {
+        return {
+          id: key,
+          label: key === "__ungrouped__" ? void 0 : key,
+          items: groupItems,
+          divider: false
+        };
+      });
+    }
+    return [];
+  }, [items, groups]);
+  return /* @__PURE__ */jsx(Flex, {
+    as: "nav",
+    sx: {
+      ...variantStyles.container,
+      ...sx
+    },
+    role: "navigation",
+    children: processedGroups.map((group, groupIndex) => {
+      return /* @__PURE__ */jsxs(React.Fragment, {
+        children: [group.label && /* @__PURE__ */jsx(Text, {
+          sx: variantStyles.groupLabel,
+          as: "div",
+          role: "heading",
+          children: group.label
+        }), /* @__PURE__ */jsx(Flex, {
+          sx: {
+            flexDirection: "column",
+            gap: variantStyles.container.gap
+          },
+          children: group.items.map((item, itemIndex) => {
+            const isLastItem = itemIndex === group.items.length - 1;
+            return /* @__PURE__ */jsx(NavListItemComponent, {
+              item,
+              onItemClick,
+              variantStyles,
+              iconSize,
+              LinkComponent,
+              showDivider: item.divider || isLastItem && group.divider
+            }, item.id || `${group.id}-item-${itemIndex}`);
+          })
+        })]
+      }, group.id || `group-${groupIndex}`);
+    })
+  });
+};
+NavList.displayName = "NavList";
+
+//#endregion
+//#region src/components/NotificationCard/NotificationCard.tsx
+var NotificationCard = props => {
+  const sxMap = {
+    success: {
+      card: {
+        backgroundColor: "feedback.background.positive.default",
+        borderColor: "feedback.border.positive.default"
+      }
+    },
+    error: {
+      card: {
+        backgroundColor: "feedback.background.negative.default",
+        borderColor: "feedback.border.negative.default"
+      }
+    },
+    warning: {
+      card: {
+        backgroundColor: "feedback.background.caution.default",
+        borderColor: "feedback.border.caution.default"
+      }
+    },
+    info: {
+      card: {
+        backgroundColor: "feedback.background.primary.default",
+        borderColor: "feedback.border.primary.default"
+      }
+    },
+    neutral: {
+      card: {
+        backgroundColor: "feedback.background.primary.default",
+        borderColor: "feedback.border.primary.default"
+      }
+    }
+  };
+  const icon = {
+    success: "success-circle",
+    error: "error",
+    warning: "warning-alt",
+    info: "info",
+    neutral: "info"
+  };
+  const hasCaption = Boolean(props.caption);
+  const hasActions = Boolean(props.actions && props.actions.length > 0);
+  const hasTitle = Boolean(props.title);
+  const shouldCenterVerticallyWithoutTitle = !hasCaption && !hasActions && !hasTitle;
+  const shouldCenterVerticallyWithTitle = !hasCaption && !hasActions && hasTitle;
+  const shouldAddMinHeight = !hasCaption && !hasActions;
+  return /* @__PURE__ */jsxs(Card, {
+    sx: {
+      ...sxMap[props.type].card,
+      width: "full"
+    },
+    children: [props.title && /* @__PURE__ */jsxs(Card.Title, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        fontSize: ["md", "xl"],
+        paddingY: ["1", "2", "4"],
+        paddingX: ["2", "4", "8"]
+      },
+      children: [/* @__PURE__ */jsxs(Text, {
+        sx: {
+          display: "inline-flex",
+          alignItems: "flex-start",
+          gap: "2",
+          flexDirection: "row",
+          flexWrap: "wrap"
+        },
+        children: [/* @__PURE__ */jsxs(Box, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: "2"
+          },
+          children: [/* @__PURE__ */jsx(Icon, {
+            icon: icon[props.type]
+          }), props.title]
+        }), props.tags && (Array.isArray(props.tags) ? props.tags.length > 0 : true) && (Array.isArray(props.tags) ? props.tags.map((tag, index) => {
+          return /* @__PURE__ */jsx(Tag, {
+            children: tag
+          }, index);
+        }) : /* @__PURE__ */jsx(Tag, {
+          children: props.tags
+        }))]
+      }), props.onClose && /* @__PURE__ */jsx(Box, {
+        sx: {
+          marginLeft: "auto"
+        },
+        children: /* @__PURE__ */jsx(CloseButton, {
+          onClick: props.onClose
+        })
+      })]
+    }), /* @__PURE__ */jsxs(Card.Body, {
+      sx: {
+        ...sxMap[props.type].card,
+        display: "flex",
+        flexDirection: "column",
+        gap: "2",
+        paddingY: ["1", "2", "4"],
+        paddingX: ["2", "4", "8"]
+      },
+      children: [/* @__PURE__ */jsx(Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          minHeight: shouldAddMinHeight ? "40px" : "auto",
+          alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
+          width: "100%",
+          gap: "4"
+        },
+        children: /* @__PURE__ */jsx(Box, {
+          sx: {
+            flex: 1
+          },
+          children: /* @__PURE__ */jsx(Text, {
+            sx: {
+              fontSize: ["sm", "md"]
+            },
+            children: props.message
+          })
+        })
+      }), props.actions && props.actions.length > 0 && /* @__PURE__ */jsx(Box, {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          mt: 2
+        },
+        children: props.actions.map((action, index) => {
+          return action.action === "open_url" ? /* @__PURE__ */jsx(Link, {
+            href: action.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            sx: {
+              color: "action.text.accent.default",
+              cursor: "pointer"
+            },
+            children: action.label || "Acessar"
+          }, index) : null;
+        })
+      }), props.caption && /* @__PURE__ */jsx(Box, {
+        sx: {
+          whiteSpace: "nowrap",
+          mt: 6
+        },
+        children: /* @__PURE__ */jsx(Text, {
+          sx: {
+            fontSize: "xs",
+            color: "text.secondary"
+          },
+          children: props.caption
+        })
+      }), !props.title && props.onClose && /* @__PURE__ */jsx(Box, {
+        sx: {
+          alignSelf: "flex-end"
+        },
+        children: /* @__PURE__ */jsx(CloseButton, {
+          onClick: props.onClose
+        })
+      })]
+    })]
+  });
+};
+
+//#endregion
+//#region src/components/NotificationsMenu/NotificationsMenu.tsx
+var NotificationsMenu = ({
+  notifications,
+  defaultOpen = false,
+  hasMore = false,
+  onLoadMore,
+  onOpenChange,
+  count,
+  onClose,
+  onClearAll
+}) => {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+  const [openToLeft, setOpenToLeft] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const loadMoreRef = React.useRef(null);
+  const [showCount, setShowCount] = React.useState(true);
+  const togglePanel = () => {
+    setIsOpen(prev => {
+      const next = !prev;
+      onOpenChange?.(next);
+      return next;
+    });
+  };
+  React.useEffect(() => {
+    if (!isOpen || !buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    const spaceRight = window.innerWidth - rect.right;
+    const spaceLeft = rect.left;
+    setShowCount(false);
+    setOpenToLeft(spaceRight < 500 && spaceLeft > spaceRight);
+  }, [isOpen]);
+  React.useEffect(() => {
+    if (!hasMore || !onLoadMore || !loadMoreRef.current) return;
+    const observer = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) onLoadMore();
+    }, {
+      root: null,
+      rootMargin: "0px",
+      threshold: 1
+    });
+    observer.observe(loadMoreRef.current);
+    return () => {
+      if (loadMoreRef.current) observer.unobserve(loadMoreRef.current);
+    };
+  }, [hasMore, onLoadMore, notifications.length]);
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = event => {
+      if (containerRef.current && !containerRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
+        setIsOpen(false);
+        onOpenChange?.(false);
+        onClose?.();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onOpenChange, onClose]);
+  return /* @__PURE__ */jsx(Flex, {
+    sx: {
+      position: "relative",
+      justifyContent: "flex-start"
+    },
+    children: /* @__PURE__ */jsxs(Box, {
+      sx: {
+        position: "relative"
+      },
+      children: [/* @__PURE__ */jsxs(IconButton, {
+        ref: buttonRef,
+        variant: "ghost",
+        sx: {
+          position: "relative",
+          borderRadius: "full",
+          padding: 1,
+          transition: "background-color 0.3s ease",
+          "&:hover": {
+            backgroundColor: "action.background.muted.default"
+          }
+        },
+        onClick: togglePanel,
+        children: [/* @__PURE__ */jsx(Box, {
+          sx: {
+            color: "display.text.muted.default"
+          },
+          children: /* @__PURE__ */jsx(Icon, {
+            icon: "mdi:bell-outline",
+            width: 22,
+            height: 22
+          })
+        }), count > 0 && showCount && /* @__PURE__ */jsx(Box, {
+          sx: {
+            position: "absolute",
+            top: "-2px",
+            right: "-2px",
+            minWidth: "14px",
+            height: "14px",
+            paddingX: 1,
+            borderRadius: "full",
+            backgroundColor: "action.background.negative.default",
+            color: "feedback.text.primary.default",
+            fontSize: "10px",
+            fontWeight: "bold",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            lineHeight: 1
+          },
+          children: count > 99 ? "99+" : count
+        })]
+      }), isOpen && /* @__PURE__ */jsx("div", {
+        ref: containerRef,
+        children: /* @__PURE__ */jsx(Card, {
+          sx: {
+            position: "absolute",
+            top: "calc(100% + 8px)",
+            left: openToLeft ? "auto" : 0,
+            right: openToLeft ? 0 : "auto",
+            width: notifications.length === 0 ? ["60vw", "300px"] : ["90vw", "600px"],
+            maxHeight: "550px",
+            overflowY: "auto",
+            zIndex: "modal",
+            padding: 0,
+            boxShadow: "xl",
+            borderRadius: "2xl",
+            backgroundColor: "display.background.secondary.default"
+          },
+          children: /* @__PURE__ */jsx(Box, {
+            sx: {
+              width: "100%"
+            },
+            children: /* @__PURE__ */jsxs(Flex, {
+              sx: {
+                flexDirection: "column",
+                gap: 4
+              },
+              children: [notifications.length > 0 && onClearAll && /* @__PURE__ */jsx(Flex, {
+                sx: {
+                  justifyContent: "flex-end",
+                  p: 2,
+                  marginBottom: -2
+                },
+                children: /* @__PURE__ */jsxs(Button, {
+                  variant: "ghost",
+                  sx: {
+                    borderRadius: "md",
+                    padding: 1,
+                    paddingLeft: 10,
+                    paddingRight: 10,
+                    fontSize: "md",
+                    color: "display.text.muted.default",
+                    border: "1px solid",
+                    borderColor: "display.border.default",
+                    transition: "all 0.2s ease",
+                    display: "flex",
+                    alignItems: "center",
+                    "&:hover": {
+                      backgroundColor: "action.background.muted.default",
+                      color: "display.text.default",
+                      borderColor: "action.border.default"
+                    }
+                  },
+                  onClick: onClearAll,
+                  children: [/* @__PURE__ */jsx(Icon, {
+                    icon: "delete",
+                    width: 16,
+                    height: 16
+                  }), /* @__PURE__ */jsx(Text, {
+                    sx: {
+                      ml: -1,
+                      marginTop: -.4,
+                      fontSize: "sm"
+                    },
+                    children: "Limpar Tudo"
+                  })]
+                })
+              }), notifications.length === 0 ? /* @__PURE__ */jsx(Text, {
+                sx: {
+                  color: "display.text.muted.default",
+                  textAlign: "center",
+                  p: 4
+                },
+                children: "Nenhuma notificação"
+              }) : notifications.map(notification => {
+                return /* @__PURE__ */jsx(NotificationCard, {
+                  ...notification,
+                  onClose: () => {
+                    notification.onClose?.();
+                    onClose?.();
+                  }
+                }, notification.id);
+              }), hasMore && /* @__PURE__ */jsx("div", {
+                ref: loadMoreRef,
+                style: {
+                  height: 1
+                }
+              })]
+            })
+          })
+        })
+      })]
+    })
+  });
+};
+
+//#endregion
+//#region src/components/Search/Search.tsx
+var Search = ({
+  value,
+  defaultValue,
+  loading,
+  onChange,
+  ...props
+}) => {
+  const [text, setText] = React.useState(value ?? defaultValue);
+  const debouncedValue = useDebounce(text, 500);
+  React.useEffect(() => {
+    onChange(debouncedValue);
+  }, [debouncedValue, onChange]);
+  return /* @__PURE__ */jsx(Input, {
+    leadingIcon: loading ? "loading" : "search",
+    defaultValue: text,
+    onChange: e => {
+      return setText(e.target.value);
+    },
+    ...props
+  });
+};
+
+//#endregion
+//#region src/components/Table/Table.tsx
+var Table = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "table",
+    ...props
+  });
+};
+var TableHead = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "thead",
+    ...props
+  });
+};
+var TableBody = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "tbody",
+    ...props
+  });
+};
+var TableRow = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "tr",
+    ...props
+  });
+};
+var TableCell = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "td",
+    ...props
+  });
+};
+var TableHeader = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "th",
+    ...props
+  });
+};
+var TableCaption = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "caption",
+    ...props
+  });
+};
+var TableFooter = props => {
+  return /* @__PURE__ */jsx(Box, {
+    as: "tfoot",
+    ...props
+  });
+};
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.Header = TableHeader;
+Table.Caption = TableCaption;
+Table.Footer = TableFooter;
+
+//#endregion
+//#region src/components/Tabs/Tabs.tsx
+var Tabs = props => {
+  const {
+    sx: customSx,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsx(Box, {
+    sx: ({
+      colors
+    }) => {
+      const themeColors = colors;
+      /**
+      * https://github.com/reactjs/react-tabs/blob/main/style/react-tabs.css
+      */
+      return {
+        /**
+        * Tabs
+        */
+        ".react-tabs": {
+          WebkitTapHighlightColor: "transparent"
+        },
+        ".react-tabs__tab-list": {
+          borderBottom: "md",
+          borderColor: themeColors?.input?.border?.muted?.default,
+          paddingLeft: 0
+        },
+        ".react-tabs__tab--selected": {
+          backgroundColor: "transparent",
+          border: "none",
+          borderBottom: "lg",
+          borderColor: themeColors?.input?.border?.accent?.default
+        },
+        ".react-tabs__tab": {
+          color: themeColors?.input?.text?.secondary?.default,
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "2",
+          padding: "3",
+          cursor: "pointer",
+          position: "relative",
+          listStyle: "none"
+        },
+        ".react-tabs__tab--disabled": {
+          cursor: "not-allowed",
+          color: themeColors?.input?.text?.muted?.default
+        },
+        ".react-tabs__tab:focus": {
+          outline: "none"
+        },
+        ".react-tabs__tab:focus:after": {
+          position: "absolute",
+          height: "min",
+          left: "-2",
+          right: "-2",
+          bottom: "-3"
+        },
+        ".react-tabs__tab-panel": {
+          display: "none"
+        },
+        ".react-tabs__tab-panel--selected": {
+          display: "block"
+        },
+        ...customSx
+      };
+    },
+    ...restProps,
+    children: /* @__PURE__ */jsx(Tabs$1, {
+      ...restProps,
+      children: props.children
+    })
+  });
+};
+Tabs.TabList = TabList;
+/**
+* Tab default props
+* https://github.com/reactjs/react-tabs/blob/main/src/components/Tab.js
+*/
+Tabs.Tab = Tab;
+Tabs.TabPanel = TabPanel;
+
+//#endregion
+//#region src/components/Toast/Toast.tsx
+var ToastContainer = props => {
+  const {
+    theme
+  } = useTheme();
+  const className = React.useMemo(() => {
+    return css$1(css({
+      ".Toastify__toast-container": {}
+    })(theme));
+  }, [theme]);
+  return /* @__PURE__ */jsx(Box, {
+    className,
+    sx: ({
+      colors,
+      fonts
+    }) => {
+      const themeColors = colors;
+      /**
+      * https://fkhadra.github.io/react-toastify/how-to-style#override-css-variables
+      */
+      return {
+        "--toastify-font-family": fonts?.body,
+        "--toastify-color-light": themeColors?.feedback?.background?.primary?.default
+      };
+    },
+    children: /* @__PURE__ */jsx(ToastContainer$1, {
+      className,
+      ...props
+    })
+  });
+};
+var toast = toast$1;
+
+//#endregion
+export { Accordion, DatePicker, Drawer, EnhancedTitle, FileUploader, InstallPwa, InstallPwaUi, JsonEditor, JsonView, List, ListItem, LockedOverlay, Markdown, Menu, MetricCard, Modal, NavList, NotificationCard, NotificationsMenu, Search, SpotlightCard, Table, Tabs, ToastContainer, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };