@caratlogic/design-system 0.1.6 → 0.1.8

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { cn } from './lib/utils';
 export * from './lib/badge';
 export * from './lib/notify';
-export { releaseStaleOverlayBodyLock } from './lib/overlayBodyLock';
+export { releaseStaleOverlayBodyLock, watchOverlayBodyLock, } from './lib/overlayBodyLock';
 export * from './components/atoms/ActionButtonWithTooltip';
 export * from './components/atoms/Alert';
 export * from './components/atoms/Badge';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.esm.js

@@ -4345,13 +4345,19 @@ const notify = {
     promise: toast.promise.bind(toast),
 };
 
+/**
+ * Only overlays that actually lock `<body>` count. `[data-radix-popper-content-wrapper]`
+ * is deliberately absent: a tooltip renders into one, so including it made an
+ * open tooltip — say, on the Edit button you just clicked — look like a live
+ * modal and suppress the release, leaving the page unclickable. Modal poppers
+ * (menus, selects) still match through their roles.
+ */
 const OVERLAY_CONTENT_SELECTOR = [
     '[data-slot="dialog-content"]',
     '[role="dialog"]',
     '[role="alertdialog"]',
     '[role="menu"]',
     '[role="listbox"]',
-    '[data-radix-popper-content-wrapper]',
 ].join(',');
 /**
  * `@radix-ui/react-dismissable-layer` keeps the value it must restore to
@@ -4363,6 +4369,36 @@ const OVERLAY_CONTENT_SELECTOR = [
  * Clearing is only safe once nothing is on screen, so this is a no-op while any
  * overlay content is still mounted.
  */
+/**
+ * Watches `<body>` and clears a lock that outlives every overlay.
+ *
+ * The per-overlay hooks handle the normal close path; this is the backstop for
+ * the ones they cannot see — an overlay unmounted by a route change, a layer
+ * combination nobody anticipated, a third-party popup. Returns a disposer.
+ *
+ * Cheap: an attribute-scoped MutationObserver that only reacts when something
+ * actually writes `style` or `data-scroll-locked` on `<body>`.
+ */
+function watchOverlayBodyLock() {
+    if (typeof document === 'undefined')
+        return () => { };
+    let timer;
+    const check = () => {
+        window.clearTimeout(timer);
+        // Outlive the exit animation, so a legitimately-open overlay is still
+        // mounted when `releaseStaleOverlayBodyLock` looks for it.
+        timer = window.setTimeout(() => releaseStaleOverlayBodyLock(), 500);
+    };
+    const observer = new MutationObserver(check);
+    observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['style', 'data-scroll-locked'],
+    });
+    return () => {
+        window.clearTimeout(timer);
+        observer.disconnect();
+    };
+}
 function releaseStaleOverlayBodyLock() {
     if (typeof document === 'undefined')
         return;
@@ -12093,6 +12129,9 @@ function useRefundToWallet(open) {
 
 const ConfirmDialog = ({ open, onOpenChange, title, description, info, confirmLabel = 'Yes', cancelLabel = 'Cancel', confirmVariant = 'default', icon: Icon = Trash2, disabled = false, onConfirm, onCancel, }) => {
     const { refundToWallet, setRefundToWallet } = useRefundToWallet(open);
+    // Opened from a modal menu row, two dismissable layers overlap and Radix
+    // restores `pointer-events: none` to <body> on close, freezing the page.
+    useOverlayBodyLockRelease(open);
     return (jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxs(DialogContent, { className: "gap-3 p-5", children: [jsxs(DialogHeader, { className: "gap-1.5", children: [jsxs(DialogTitle, { className: "flex items-center gap-2", children: [confirmVariant === 'destructive' && (jsx("span", { className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-destructive/10", children: jsx(Icon, { className: "h-3.5 w-3.5 text-destructive" }) })), jsx("span", { children: title })] }), description && jsx(DialogDescription, { children: description }), info && (jsx(InfoCard, { info: info, title: title, refundToWallet: refundToWallet, onRefundChange: setRefundToWallet }))] }), jsxs(DialogFooter, { className: "mt-1", children: [jsx(Button$1, { variant: "outline", onClick: () => {
                                 onCancel?.();
                                 onOpenChange(false);
@@ -28576,6 +28615,8 @@ const SIZE_WIDTH = {
  */
 function Modal({ open, onClose, title, icon, children, footer, size = 'md', hideCloseButton = false, className, bodyClassName, }) {
     const maxWidth = SIZE_WIDTH[size];
+    // See ConfirmDialog: overlapping dismissable layers leak the <body> lock.
+    useOverlayBodyLockRelease(open);
     return (jsx(Dialog, { open: open, onOpenChange: (o) => !o && onClose(), children: jsxs(DialogContent, { hideCloseButton: true, style: {
                 width: `min(${maxWidth}px, calc(100vw - 2rem))`,
                 maxWidth: `${maxWidth}px`,
@@ -57408,7 +57449,11 @@ const SidebarInset = React.forwardRef(({ className, ...props }, ref) => (jsx("ma
 SidebarInset.displayName = 'SidebarInset';
 const SidebarInput = React.forwardRef(({ className, ...props }, ref) => (jsx("input", { ref: ref, "data-sidebar": "input", className: cn('h-8 w-full bg-background text-sm shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring', className), ...props })));
 SidebarInput.displayName = 'SidebarInput';
-const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, "data-sidebar": "header", className: cn('flex flex-col gap-2 pr-1 pt-3 pb-4 pl-4', className), ...props })));
+const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, "data-sidebar": "header", 
+    /* Icon mode drops the asymmetric pl-4/pr-1 (which is there for the expanded
+       brand + collapse button row) so a centred brand lands on the same axis as
+       the nav icons below it. */
+    className: cn('flex flex-col gap-2 pr-1 pt-3 pb-4 pl-4 group-data-[collapsible=icon]:px-0', className), ...props })));
 SidebarHeader.displayName = 'SidebarHeader';
 const SidebarFooter = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, "data-sidebar": "footer", className: cn('flex flex-col gap-2 pr-1 py-4 pl-4', className), ...props })));
 SidebarFooter.displayName = 'SidebarFooter';
@@ -57434,6 +57479,21 @@ const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => (jsx("ul"
 SidebarMenu.displayName = 'SidebarMenu';
 const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => (jsx("li", { ref: ref, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props })));
 SidebarMenuItem.displayName = 'SidebarMenuItem';
+/**
+ * Owns a nav tooltip's open state so every tooltip closes when the sidebar
+ * expands or collapses. The width transition slides buttons out from under a
+ * stationary pointer without firing `pointerleave`, so Radix otherwise keeps
+ * each tooltip it opened on the way in — they surface together the moment the
+ * rail renders them, and only a fresh hover dismisses them one by one.
+ */
+const useSidebarTooltipOpen = () => {
+    const { state } = useSidebar();
+    const [open, setOpen] = React.useState(false);
+    React.useEffect(() => {
+        setOpen(false);
+    }, [state]);
+    return { open, setOpen };
+};
 const sidebarMenuButtonVariants = cva('peer/menu-button relative flex h-9 w-full cursor-pointer items-center gap-2 overflow-hidden rounded-sm px-2.5 py-1.5 text-left text-sm text-sidebar-foreground outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-active-bg data-[active=true]:text-sidebar-foreground data-[state=open]:hover:bg-sidebar-active-bg data-[state=open]:hover:text-sidebar-foreground group-data-[collapsible=icon]:!size-9 group-data-[collapsible=icon]:!p-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:[&>span]:hidden [&>span]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
     variants: {
         variant: {
@@ -57456,13 +57516,15 @@ const SidebarMenuButton = React.forwardRef(({ asChild = false, isActive = false,
     const { state } = useSidebar();
     const [innerRef, setRef] = useForwardedRef(ref);
     const truncatedText = useTruncatedText(innerRef);
+    const { open: tooltipOpen, setOpen: setTooltipOpen } = useSidebarTooltipOpen();
     const button = (jsx(Comp, { ref: setRef, "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
     // Tooltip when collapsed (icon-only) OR when the expanded label is clipped.
     // The Tooltip structure stays mounted and only the content is conditional,
     // so toggling it never remounts the button.
     const collapsed = !!tooltip && state === 'collapsed';
     const collapsedProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip;
-    return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: button }), collapsed ? (jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, ...collapsedProps })) : truncatedText ? (jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, children: truncatedText })) : null] }));
+    const tooltipContent = collapsed ? (jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, ...collapsedProps })) : truncatedText ? (jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, children: truncatedText })) : null;
+    return (jsxs(Tooltip, { open: !!tooltipContent && tooltipOpen, onOpenChange: setTooltipOpen, children: [jsx(TooltipTrigger, { asChild: true, children: button }), tooltipContent] }));
 });
 SidebarMenuButton.displayName = 'SidebarMenuButton';
 const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
@@ -57486,9 +57548,10 @@ const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = 'md', i
     const Comp = asChild ? Slot : 'a';
     const [innerRef, setRef] = useForwardedRef(ref);
     const truncatedText = useTruncatedText(innerRef);
+    const { open: tooltipOpen, setOpen: setTooltipOpen } = useSidebarTooltipOpen();
     const button = (jsx(Comp, { ref: setRef, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('relative flex h-9 w-full min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-sm pl-3 pr-1 py-1.5 text-left text-sidebar-foreground/80 outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-primary data-[active=true]:text-sidebar-primary-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className), ...props }));
     // Keep the Tooltip mounted; render the content only when the label is clipped.
-    return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: button }), truncatedText && (jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, children: truncatedText }))] }));
+    return (jsxs(Tooltip, { open: !!truncatedText && tooltipOpen, onOpenChange: setTooltipOpen, children: [jsx(TooltipTrigger, { asChild: true, children: button }), truncatedText && (jsx(TooltipContent, { side: "right", align: "center", className: TRUNCATION_TOOLTIP_CLASS, children: truncatedText }))] }));
 });
 SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
 const Collapsible = CollapsiblePrimitive.Root;
@@ -65758,6 +65821,15 @@ const DEFAULT_SIDEBAR_WIDTH = '248px';
 /** Green pill marking the active top-level item. Rendered in-flow as the row's
  *  first flex child (hidden when the sidebar collapses to icons). */
 const ActiveRail = () => (jsx("span", { "aria-hidden": "true", className: "pointer-events-none h-9 w-[4px] shrink-0 rounded-full bg-sidebar-primary group-data-[collapsible=icon]:hidden" }));
+/** Collapsed, the rail is also the way back into the menu: clicking any nav
+ *  item opens the sidebar, not just the brand. */
+const useCollapsedSidebar = () => {
+    const { state, isMobile, setOpen } = useSidebar();
+    return {
+        collapsed: !isMobile && state === 'collapsed',
+        expandSidebar: () => setOpen(true),
+    };
+};
 const BrandHeader = ({ brand }) => {
     const { state, isMobile, openMobile, toggleSidebar } = useSidebar();
     const expanded = state === 'expanded' || (isMobile && openMobile);
@@ -65769,13 +65841,31 @@ const BrandHeader = ({ brand }) => {
 const NavLeaf = ({ item, currentPath, onNavigate }) => {
     const Icon = item.icon;
     const active = isPathActive(currentPath, item.path);
-    return (jsxs(SidebarMenuItem, { className: cn(active && 'flex items-center gap-1.5 group-data-[collapsible=icon]:block'), children: [active && jsx(ActiveRail, {}), jsxs(SidebarMenuButton, { isActive: active, tooltip: item.label, onClick: () => item.path && onNavigate(item.path), className: cn(active && 'min-w-0 flex-1 group-data-[collapsible=icon]:flex-none'), children: [Icon && jsx(Icon, {}), jsx("span", { children: item.label })] }), item.badge != null && (jsx(SidebarMenuBadge, { className: "h-5 w-5 min-w-5 rounded-full border border-primary bg-primary/10 p-0 text-primary", children: item.badge }))] }));
+    const { collapsed, expandSidebar } = useCollapsedSidebar();
+    return (jsxs(SidebarMenuItem, { className: cn(active && 'flex items-center gap-1.5 group-data-[collapsible=icon]:block'), children: [active && jsx(ActiveRail, {}), jsxs(SidebarMenuButton, { isActive: active, tooltip: item.label, onClick: () => {
+                    if (collapsed)
+                        expandSidebar();
+                    if (item.path)
+                        onNavigate(item.path);
+                }, className: cn(active && 'min-w-0 flex-1 group-data-[collapsible=icon]:flex-none'), children: [Icon && jsx(Icon, {}), jsx("span", { children: item.label })] }), item.badge != null && (jsx(SidebarMenuBadge, { className: "h-5 w-5 min-w-5 rounded-full border border-primary bg-primary/10 p-0 text-primary", children: item.badge }))] }));
 };
 const NavParent = ({ item, currentPath, onNavigate }) => {
     const Icon = item.icon;
     const children = (item.children ?? []).filter((s) => s.visible !== false);
     const parentActive = children.some((s) => isPathActive(currentPath, s.path));
-    return (jsx(Collapsible, { asChild: true, defaultOpen: parentActive, children: jsxs(SidebarMenuItem, { className: "group/collapsible", children: [jsxs("div", { className: cn(parentActive &&
+    const { collapsed, expandSidebar } = useCollapsedSidebar();
+    const [open, setOpen] = useState(parentActive);
+    // Collapsed, the sub-menu is hidden, so a click opens the sidebar and this
+    // group instead of silently toggling something the user cannot see.
+    const handleOpenChange = (next) => {
+        if (!collapsed) {
+            setOpen(next);
+            return;
+        }
+        expandSidebar();
+        setOpen(true);
+    };
+    return (jsx(Collapsible, { asChild: true, open: open, onOpenChange: handleOpenChange, children: jsxs(SidebarMenuItem, { className: "group/collapsible", children: [jsxs("div", { className: cn(parentActive &&
                         'flex items-center gap-1.5 group-data-[collapsible=icon]:block'), children: [parentActive && jsx(ActiveRail, {}), jsx(CollapsibleTrigger, { asChild: true, children: jsxs(SidebarMenuButton, { isActive: parentActive, tooltip: item.label, className: cn(parentActive &&
                                     'min-w-0 flex-1 group-data-[collapsible=icon]:flex-none'), children: [Icon && jsx(Icon, {}), jsx("span", { children: item.label }), jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 group-data-[collapsible=icon]:hidden" })] }) })] }), jsx(CollapsibleContent, { children: jsx(SidebarMenuSub, { children: children.map((sub) => {
                             const SubIcon = sub.icon;
@@ -67812,5 +67902,5 @@ var RichTextAreaImpl = /*#__PURE__*/Object.freeze({
   RichTextarea: RichTextarea
 });
 
-export { ActionBadge, ActionButtonWithTooltip, AdvancedSearchDrawer, Alert, ApiComboBox, AppSidebar, AuditEntryCard, AuditHistoryPanel, AuditTimeline, AuditTimelineShimmer, Badge, BadgeType, BusinessContactStatusFilter, Button, CUSTOMER_AUDIT_CONFIG, CertificateRowList, ChangePill, Collapsible, CollapsibleCard, CollapsibleContent, CollapsibleTrigger, ConfirmDialog, ContactTypeFilter, CopyButton, CreateFormPageHeader, CreateFormPageShell, CurrencyDisplayTabs, CurrencyInput, CurrencyToggle, CustomCombobox, CustomTable, CustomizeColumnsDrawer, DIAMOND_AUDIT_CONFIG, DashboardShell, DataEditableTable, DataTable, DateInput, DetailChip, DetailPageLayout, DetailPageSkeleton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntityHeader, Field, FieldSkeleton, FileUploader, FilterMultiSelect, FilterSelect, FormSectionCard, FormSectionCardSkeleton, GEM_AUDIT_CONFIG, HistoryEntryCard, HistoryTimeline, HistoryTimelineShimmer, INVOICE_AUDIT_CONFIG, IconButton, IdHyperlinkText, InfoBanner, InventoryComboBox, InventoryItemCard, InventoryItemRow, InvoiceComboBox, KYCStatusFilter, KeyValueGrid, LAYOUT_AUDIT_CONFIG, LabeledToggle, MEMO_IN_AUDIT_CONFIG, MEMO_OUT_AUDIT_CONFIG, MediaGallery, MemoInComboBox, MetricCard, MetricRow, MetricTile, Modal, MoreInfoPanel, MoreInfoTrigger, Navbar, NavbarActions, NavbarAvatar, NavbarIconButton, NavbarSearch, NavbarTitle, NumberInput, NumberedStepCard, OtpInput, OwnershipFilter, OwnershipSplitCard, PROFORMA_AUDIT_CONFIG, PageHeader, PageTabs, Pagination, PaginationSelect, PartnerShareCard, PriceInput, Protected, PurchaseOrderComboBox, QUOTATION_AUDIT_CONFIG, RadioCardGroup, ReadMoreText, RefreshButton, RichTextarea$1 as RichTextarea, SEARCHABLE_SELECT_PAGE_SIZE, SafeImage, SearchBox, SearchInput, SearchableSelect, SectionCard, SectionIcon, SegmentedControl, ShareDialog, ShareMenu, ShimmerTable, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SlideOut, SlideOutClose, SlideOutContent, SlideOutDescription, SlideOutHeader, SlideOutOverlay, SlideOutPortal, SlideOutTitle, SlideOutTrigger, Slider, SpecList, Spinner, SquareSkeleton, StatusBadge$1 as StatusBadge, StatusFilter, Stepper, StockTypeFilter, TablePagination, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, TextHyperlink, TimePicker, ToggleSwitch, TruncateTooltip, WarehouseComboBox, WarehouseFilter, ZoomSplitViewer, badgeVariants, buildBulkShareTitle, buildInventoryPublicUrl, buildInventoryRowProps, buildInventoryShareTitle, buildWhatsappUrl, buttonVariants, cn, createVideoMediaItem, dropdownMenuItemDestructiveClass, formatFileSize, generateActionDescription, generateTitle, getBadgeTypeForStatus, getChangePills, getInitials, iconButtonVariants, isPathActive, notify, releaseStaleOverlayBodyLock, renderBadge, useAuditShowMore, useBadge, useButton, useDropdownMenu, useNavbar, useSidebar, videoThumbnailSrc };
+export { ActionBadge, ActionButtonWithTooltip, AdvancedSearchDrawer, Alert, ApiComboBox, AppSidebar, AuditEntryCard, AuditHistoryPanel, AuditTimeline, AuditTimelineShimmer, Badge, BadgeType, BusinessContactStatusFilter, Button, CUSTOMER_AUDIT_CONFIG, CertificateRowList, ChangePill, Collapsible, CollapsibleCard, CollapsibleContent, CollapsibleTrigger, ConfirmDialog, ContactTypeFilter, CopyButton, CreateFormPageHeader, CreateFormPageShell, CurrencyDisplayTabs, CurrencyInput, CurrencyToggle, CustomCombobox, CustomTable, CustomizeColumnsDrawer, DIAMOND_AUDIT_CONFIG, DashboardShell, DataEditableTable, DataTable, DateInput, DetailChip, DetailPageLayout, DetailPageSkeleton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntityHeader, Field, FieldSkeleton, FileUploader, FilterMultiSelect, FilterSelect, FormSectionCard, FormSectionCardSkeleton, GEM_AUDIT_CONFIG, HistoryEntryCard, HistoryTimeline, HistoryTimelineShimmer, INVOICE_AUDIT_CONFIG, IconButton, IdHyperlinkText, InfoBanner, InventoryComboBox, InventoryItemCard, InventoryItemRow, InvoiceComboBox, KYCStatusFilter, KeyValueGrid, LAYOUT_AUDIT_CONFIG, LabeledToggle, MEMO_IN_AUDIT_CONFIG, MEMO_OUT_AUDIT_CONFIG, MediaGallery, MemoInComboBox, MetricCard, MetricRow, MetricTile, Modal, MoreInfoPanel, MoreInfoTrigger, Navbar, NavbarActions, NavbarAvatar, NavbarIconButton, NavbarSearch, NavbarTitle, NumberInput, NumberedStepCard, OtpInput, OwnershipFilter, OwnershipSplitCard, PROFORMA_AUDIT_CONFIG, PageHeader, PageTabs, Pagination, PaginationSelect, PartnerShareCard, PriceInput, Protected, PurchaseOrderComboBox, QUOTATION_AUDIT_CONFIG, RadioCardGroup, ReadMoreText, RefreshButton, RichTextarea$1 as RichTextarea, SEARCHABLE_SELECT_PAGE_SIZE, SafeImage, SearchBox, SearchInput, SearchableSelect, SectionCard, SectionIcon, SegmentedControl, ShareDialog, ShareMenu, ShimmerTable, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SlideOut, SlideOutClose, SlideOutContent, SlideOutDescription, SlideOutHeader, SlideOutOverlay, SlideOutPortal, SlideOutTitle, SlideOutTrigger, Slider, SpecList, Spinner, SquareSkeleton, StatusBadge$1 as StatusBadge, StatusFilter, Stepper, StockTypeFilter, TablePagination, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, TextHyperlink, TimePicker, ToggleSwitch, TruncateTooltip, WarehouseComboBox, WarehouseFilter, ZoomSplitViewer, badgeVariants, buildBulkShareTitle, buildInventoryPublicUrl, buildInventoryRowProps, buildInventoryShareTitle, buildWhatsappUrl, buttonVariants, cn, createVideoMediaItem, dropdownMenuItemDestructiveClass, formatFileSize, generateActionDescription, generateTitle, getBadgeTypeForStatus, getChangePills, getInitials, iconButtonVariants, isPathActive, notify, releaseStaleOverlayBodyLock, renderBadge, useAuditShowMore, useBadge, useButton, useDropdownMenu, useNavbar, useSidebar, videoThumbnailSrc, watchOverlayBodyLock };
 //# sourceMappingURL=index.esm.js.map